<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>前端学习路线 by 程序员鱼皮 | 鱼皮的编程宝典</title>
    <meta name="generator" content="VuePress 1.9.10">
    <link rel="icon" href="/favicon.ico">
    <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?2675818a983a3131404cee835018f016";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
      </script>
    <meta name="description" content="贴心的编程学习路线，全面的编程知识百科">
    <meta property="article:modified_time" content="2023-11-11T12:17:47.000Z">
    <meta property="og:site_name" content="鱼皮的编程宝典">
    <meta property="og:title" content="前端学习路线 by 程序员鱼皮">
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://codefather.cn/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/">
    <meta name="twitter:title" content="前端学习路线 by 程序员鱼皮">
    <meta name="twitter:url" content="https://codefather.cn/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:label1" content="Written by">
    <meta name="twitter:label2" content="Filed under">
    <meta name="twitter:data2" content="程序员, 编程, 计算机">
    <meta property="article:tag" content="程序员">
    <meta name="keywords" content="程序员鱼皮, 编程学习路线, 编程知识百科, Java, 编程导航, 前端, 开发, 编程分享, 项目, IT, 求职, 面经">
    
    <link rel="preload" href="/assets/css/0.styles.40c15e22.css" as="style"><link rel="preload" href="/assets/js/app.12ab4756.js" as="script"><link rel="preload" href="/assets/js/2.fd06b53e.js" as="script"><link rel="preload" href="/assets/js/42.e17cd061.js" as="script"><link rel="prefetch" href="/assets/js/1.17ea1209.js"><link rel="prefetch" href="/assets/js/10.d9532d8f.js"><link rel="prefetch" href="/assets/js/100.064ea126.js"><link rel="prefetch" href="/assets/js/101.d64c5b33.js"><link rel="prefetch" href="/assets/js/102.5e29a62c.js"><link rel="prefetch" href="/assets/js/103.59ad6cd7.js"><link rel="prefetch" href="/assets/js/104.ae4763e8.js"><link rel="prefetch" href="/assets/js/105.2a9124be.js"><link rel="prefetch" href="/assets/js/106.529bca07.js"><link rel="prefetch" href="/assets/js/107.c8671a0d.js"><link rel="prefetch" href="/assets/js/108.55c93c64.js"><link rel="prefetch" href="/assets/js/109.7d1efa54.js"><link rel="prefetch" href="/assets/js/11.2f89b5eb.js"><link rel="prefetch" href="/assets/js/110.0caecbf5.js"><link rel="prefetch" href="/assets/js/111.a2aeae49.js"><link rel="prefetch" href="/assets/js/112.eb7ceda5.js"><link rel="prefetch" href="/assets/js/113.f304408d.js"><link rel="prefetch" href="/assets/js/114.988c637f.js"><link rel="prefetch" href="/assets/js/115.bfdeed31.js"><link rel="prefetch" href="/assets/js/116.a47b8c53.js"><link rel="prefetch" href="/assets/js/117.2e1e8250.js"><link rel="prefetch" href="/assets/js/118.758ce408.js"><link rel="prefetch" href="/assets/js/119.73d9e688.js"><link rel="prefetch" href="/assets/js/12.53aaa509.js"><link rel="prefetch" href="/assets/js/120.202a8b2e.js"><link rel="prefetch" href="/assets/js/121.ca91d59a.js"><link rel="prefetch" href="/assets/js/122.8804c0dd.js"><link rel="prefetch" href="/assets/js/123.ceada225.js"><link rel="prefetch" href="/assets/js/124.4b2718b7.js"><link rel="prefetch" href="/assets/js/125.72134235.js"><link rel="prefetch" href="/assets/js/126.167b162c.js"><link rel="prefetch" href="/assets/js/127.f8139c17.js"><link rel="prefetch" href="/assets/js/128.da64a377.js"><link rel="prefetch" href="/assets/js/129.c07963b1.js"><link rel="prefetch" href="/assets/js/13.52940164.js"><link rel="prefetch" href="/assets/js/130.f66fc8bb.js"><link rel="prefetch" href="/assets/js/131.a913c7dd.js"><link rel="prefetch" href="/assets/js/132.ea648654.js"><link rel="prefetch" href="/assets/js/133.074ca70e.js"><link rel="prefetch" href="/assets/js/134.dc79ddd8.js"><link rel="prefetch" href="/assets/js/135.c4516208.js"><link rel="prefetch" href="/assets/js/136.2546baf7.js"><link rel="prefetch" href="/assets/js/137.56454fc6.js"><link rel="prefetch" href="/assets/js/138.bdb002bf.js"><link rel="prefetch" href="/assets/js/139.40a2f9b5.js"><link rel="prefetch" href="/assets/js/14.ade1e74d.js"><link rel="prefetch" href="/assets/js/140.06b20427.js"><link rel="prefetch" href="/assets/js/141.8dd992e3.js"><link rel="prefetch" href="/assets/js/142.d9305485.js"><link rel="prefetch" href="/assets/js/143.41bf907e.js"><link rel="prefetch" href="/assets/js/144.c138960c.js"><link rel="prefetch" href="/assets/js/145.fc5b38c8.js"><link rel="prefetch" href="/assets/js/146.c9166b70.js"><link rel="prefetch" href="/assets/js/147.c31d8a01.js"><link rel="prefetch" href="/assets/js/148.5c0534ca.js"><link rel="prefetch" href="/assets/js/149.d2355ea2.js"><link rel="prefetch" href="/assets/js/15.970a8ca5.js"><link rel="prefetch" href="/assets/js/150.c1644898.js"><link rel="prefetch" href="/assets/js/151.b6e4adf0.js"><link rel="prefetch" href="/assets/js/152.7a5071aa.js"><link rel="prefetch" href="/assets/js/153.31abbc68.js"><link rel="prefetch" href="/assets/js/154.9c6bb079.js"><link rel="prefetch" href="/assets/js/155.e5506a40.js"><link rel="prefetch" href="/assets/js/156.992dab50.js"><link rel="prefetch" href="/assets/js/157.12a6ee84.js"><link rel="prefetch" href="/assets/js/158.84dc1045.js"><link rel="prefetch" href="/assets/js/159.fd2022b1.js"><link rel="prefetch" href="/assets/js/16.ff971500.js"><link rel="prefetch" href="/assets/js/160.8d8889cd.js"><link rel="prefetch" href="/assets/js/161.31797def.js"><link rel="prefetch" href="/assets/js/162.bfae7a75.js"><link rel="prefetch" href="/assets/js/163.e5e8094d.js"><link rel="prefetch" href="/assets/js/164.870f212c.js"><link rel="prefetch" href="/assets/js/165.8da20a31.js"><link rel="prefetch" href="/assets/js/166.950a187d.js"><link rel="prefetch" href="/assets/js/167.fd042c52.js"><link rel="prefetch" href="/assets/js/168.7d9f058d.js"><link rel="prefetch" href="/assets/js/169.205df80e.js"><link rel="prefetch" href="/assets/js/17.4b045b26.js"><link rel="prefetch" href="/assets/js/170.270108a3.js"><link rel="prefetch" href="/assets/js/171.9f03d27d.js"><link rel="prefetch" href="/assets/js/172.1882bac7.js"><link rel="prefetch" href="/assets/js/173.fc1fe7d4.js"><link rel="prefetch" href="/assets/js/174.d77c927b.js"><link rel="prefetch" href="/assets/js/175.019b9e83.js"><link rel="prefetch" href="/assets/js/176.5ce31bd8.js"><link rel="prefetch" href="/assets/js/177.9a2006f2.js"><link rel="prefetch" href="/assets/js/178.88265ac1.js"><link rel="prefetch" href="/assets/js/179.3205ce07.js"><link rel="prefetch" href="/assets/js/18.1cdd0514.js"><link rel="prefetch" href="/assets/js/180.2ff51f44.js"><link rel="prefetch" href="/assets/js/181.f792ce97.js"><link rel="prefetch" href="/assets/js/182.103328e1.js"><link rel="prefetch" href="/assets/js/183.40fde303.js"><link rel="prefetch" href="/assets/js/184.1f36ac78.js"><link rel="prefetch" href="/assets/js/185.cf3b1c00.js"><link rel="prefetch" href="/assets/js/186.f7981399.js"><link rel="prefetch" href="/assets/js/187.20fe296d.js"><link rel="prefetch" href="/assets/js/188.7b004fea.js"><link rel="prefetch" href="/assets/js/189.599ca2d9.js"><link rel="prefetch" href="/assets/js/19.5740e4d6.js"><link rel="prefetch" href="/assets/js/190.14087c07.js"><link rel="prefetch" href="/assets/js/191.b0f73f6d.js"><link rel="prefetch" href="/assets/js/192.9d171669.js"><link rel="prefetch" href="/assets/js/193.00975585.js"><link rel="prefetch" href="/assets/js/194.2c7c43b4.js"><link rel="prefetch" href="/assets/js/195.ff126254.js"><link rel="prefetch" href="/assets/js/196.6546ae1c.js"><link rel="prefetch" href="/assets/js/197.eedb67bb.js"><link rel="prefetch" href="/assets/js/198.acdcc22c.js"><link rel="prefetch" href="/assets/js/199.7993a6b2.js"><link rel="prefetch" href="/assets/js/20.8885a4fa.js"><link rel="prefetch" href="/assets/js/200.52f08765.js"><link rel="prefetch" href="/assets/js/201.b85ab10b.js"><link rel="prefetch" href="/assets/js/202.ccec1c85.js"><link rel="prefetch" href="/assets/js/203.3f50a6ed.js"><link rel="prefetch" href="/assets/js/204.f28b803b.js"><link rel="prefetch" href="/assets/js/205.c51c53fd.js"><link rel="prefetch" href="/assets/js/206.ba0aa8f6.js"><link rel="prefetch" href="/assets/js/207.0dce311a.js"><link rel="prefetch" href="/assets/js/208.0ea629a6.js"><link rel="prefetch" href="/assets/js/209.f48c3e71.js"><link rel="prefetch" href="/assets/js/21.0bb62db4.js"><link rel="prefetch" href="/assets/js/210.689db8f2.js"><link rel="prefetch" href="/assets/js/211.72bc0f1f.js"><link rel="prefetch" href="/assets/js/212.456135bd.js"><link rel="prefetch" href="/assets/js/213.d0ea50fc.js"><link rel="prefetch" href="/assets/js/214.1400da91.js"><link rel="prefetch" href="/assets/js/215.aeef3e5d.js"><link rel="prefetch" href="/assets/js/216.a60215af.js"><link rel="prefetch" href="/assets/js/217.d6cd8b69.js"><link rel="prefetch" href="/assets/js/218.1bd500fc.js"><link rel="prefetch" href="/assets/js/219.20faf611.js"><link rel="prefetch" href="/assets/js/22.3e8347a6.js"><link rel="prefetch" href="/assets/js/220.6714179b.js"><link rel="prefetch" href="/assets/js/221.fb5b643d.js"><link rel="prefetch" href="/assets/js/222.d96272e5.js"><link rel="prefetch" href="/assets/js/223.4cb7dc3d.js"><link rel="prefetch" href="/assets/js/224.500d94cc.js"><link rel="prefetch" href="/assets/js/225.d006c34e.js"><link rel="prefetch" href="/assets/js/226.73612150.js"><link rel="prefetch" href="/assets/js/227.b02db9d1.js"><link rel="prefetch" href="/assets/js/228.aad43ff2.js"><link rel="prefetch" href="/assets/js/229.65340802.js"><link rel="prefetch" href="/assets/js/23.ceb5a5ff.js"><link rel="prefetch" href="/assets/js/230.97cab104.js"><link rel="prefetch" href="/assets/js/231.8415349a.js"><link rel="prefetch" href="/assets/js/232.db6d2697.js"><link rel="prefetch" href="/assets/js/233.723d05b1.js"><link rel="prefetch" href="/assets/js/234.26ed5e94.js"><link rel="prefetch" href="/assets/js/235.a586122b.js"><link rel="prefetch" href="/assets/js/236.f802bda8.js"><link rel="prefetch" href="/assets/js/237.cc8767ad.js"><link rel="prefetch" href="/assets/js/238.6485459e.js"><link rel="prefetch" href="/assets/js/239.9fbf3a55.js"><link rel="prefetch" href="/assets/js/24.07267ac6.js"><link rel="prefetch" href="/assets/js/240.1188f244.js"><link rel="prefetch" href="/assets/js/241.cbfb154d.js"><link rel="prefetch" href="/assets/js/242.352cea5a.js"><link rel="prefetch" href="/assets/js/243.07947e1c.js"><link rel="prefetch" href="/assets/js/244.f5b26fa9.js"><link rel="prefetch" href="/assets/js/245.c6030e32.js"><link rel="prefetch" href="/assets/js/246.d3fe99f7.js"><link rel="prefetch" href="/assets/js/247.185ae95d.js"><link rel="prefetch" href="/assets/js/248.a5f1548c.js"><link rel="prefetch" href="/assets/js/249.19691113.js"><link rel="prefetch" href="/assets/js/25.15e1f641.js"><link rel="prefetch" href="/assets/js/250.72fa1d33.js"><link rel="prefetch" href="/assets/js/251.bedd56f7.js"><link rel="prefetch" href="/assets/js/252.32bbcc8b.js"><link rel="prefetch" href="/assets/js/253.b59e5846.js"><link rel="prefetch" href="/assets/js/254.c0e37e1a.js"><link rel="prefetch" href="/assets/js/255.850da3cc.js"><link rel="prefetch" href="/assets/js/256.952d9817.js"><link rel="prefetch" href="/assets/js/257.88667bb8.js"><link rel="prefetch" href="/assets/js/258.c5873c28.js"><link rel="prefetch" href="/assets/js/259.6ae1dcbc.js"><link rel="prefetch" href="/assets/js/26.35b2bbdc.js"><link rel="prefetch" href="/assets/js/260.cb940cc3.js"><link rel="prefetch" href="/assets/js/261.0686c3e9.js"><link rel="prefetch" href="/assets/js/262.d0719839.js"><link rel="prefetch" href="/assets/js/263.ae83ebc1.js"><link rel="prefetch" href="/assets/js/264.209ad8a3.js"><link rel="prefetch" href="/assets/js/265.be8d1ee8.js"><link rel="prefetch" href="/assets/js/266.c51bceaa.js"><link rel="prefetch" href="/assets/js/267.fe8af48a.js"><link rel="prefetch" href="/assets/js/268.e18ed861.js"><link rel="prefetch" href="/assets/js/269.7126031e.js"><link rel="prefetch" href="/assets/js/27.270fcb06.js"><link rel="prefetch" href="/assets/js/270.89ead106.js"><link rel="prefetch" href="/assets/js/271.0643d07a.js"><link rel="prefetch" href="/assets/js/272.32a8e4b0.js"><link rel="prefetch" href="/assets/js/273.9881da47.js"><link rel="prefetch" href="/assets/js/274.2de022ea.js"><link rel="prefetch" href="/assets/js/275.d9a4fe99.js"><link rel="prefetch" href="/assets/js/276.d33de2e9.js"><link rel="prefetch" href="/assets/js/277.1ec367ab.js"><link rel="prefetch" href="/assets/js/278.66ab7c11.js"><link rel="prefetch" href="/assets/js/279.ff51cd15.js"><link rel="prefetch" href="/assets/js/28.ef3f6db2.js"><link rel="prefetch" href="/assets/js/280.ef45ed5f.js"><link rel="prefetch" href="/assets/js/281.87f26b81.js"><link rel="prefetch" href="/assets/js/282.c8ef594b.js"><link rel="prefetch" href="/assets/js/283.15643091.js"><link rel="prefetch" href="/assets/js/284.c4f25b2e.js"><link rel="prefetch" href="/assets/js/285.2d16e4b6.js"><link rel="prefetch" href="/assets/js/286.44eba266.js"><link rel="prefetch" href="/assets/js/287.7613e62f.js"><link rel="prefetch" href="/assets/js/288.b9546d55.js"><link rel="prefetch" href="/assets/js/289.125f85d8.js"><link rel="prefetch" href="/assets/js/29.177558be.js"><link rel="prefetch" href="/assets/js/290.db375797.js"><link rel="prefetch" href="/assets/js/291.90946626.js"><link rel="prefetch" href="/assets/js/292.a4524678.js"><link rel="prefetch" href="/assets/js/293.3ed9b083.js"><link rel="prefetch" href="/assets/js/294.d6c14116.js"><link rel="prefetch" href="/assets/js/295.2b485032.js"><link rel="prefetch" href="/assets/js/296.29d9aa0f.js"><link rel="prefetch" href="/assets/js/297.bfd72435.js"><link rel="prefetch" href="/assets/js/298.fc056989.js"><link rel="prefetch" href="/assets/js/299.0a3f258e.js"><link rel="prefetch" href="/assets/js/3.4dc033c7.js"><link rel="prefetch" href="/assets/js/30.248a229d.js"><link rel="prefetch" href="/assets/js/300.d064d776.js"><link rel="prefetch" href="/assets/js/301.d95b9fc0.js"><link rel="prefetch" href="/assets/js/302.1afa637a.js"><link rel="prefetch" href="/assets/js/303.231beaa8.js"><link rel="prefetch" href="/assets/js/304.05df35d9.js"><link rel="prefetch" href="/assets/js/305.f2d83cf9.js"><link rel="prefetch" href="/assets/js/306.d54f5e5e.js"><link rel="prefetch" href="/assets/js/307.d5df9000.js"><link rel="prefetch" href="/assets/js/308.ef2f52b3.js"><link rel="prefetch" href="/assets/js/309.d1f13319.js"><link rel="prefetch" href="/assets/js/31.32a62b91.js"><link rel="prefetch" href="/assets/js/310.30b84be3.js"><link rel="prefetch" href="/assets/js/311.d79e3145.js"><link rel="prefetch" href="/assets/js/312.58e24f19.js"><link rel="prefetch" href="/assets/js/313.9809a122.js"><link rel="prefetch" href="/assets/js/314.e92e41b1.js"><link rel="prefetch" href="/assets/js/315.8c2fc1d4.js"><link rel="prefetch" href="/assets/js/316.a0904343.js"><link rel="prefetch" href="/assets/js/317.18e42b54.js"><link rel="prefetch" href="/assets/js/318.6b051d27.js"><link rel="prefetch" href="/assets/js/319.513b0197.js"><link rel="prefetch" href="/assets/js/32.23b75afc.js"><link rel="prefetch" href="/assets/js/320.ae91bc36.js"><link rel="prefetch" href="/assets/js/321.a194efea.js"><link rel="prefetch" href="/assets/js/322.8273020e.js"><link rel="prefetch" href="/assets/js/323.d332e08f.js"><link rel="prefetch" href="/assets/js/324.ed867b64.js"><link rel="prefetch" href="/assets/js/325.c43ccf9a.js"><link rel="prefetch" href="/assets/js/326.9497d879.js"><link rel="prefetch" href="/assets/js/327.7f095e40.js"><link rel="prefetch" href="/assets/js/328.cb5c5847.js"><link rel="prefetch" href="/assets/js/329.d36b59f3.js"><link rel="prefetch" href="/assets/js/33.b258b779.js"><link rel="prefetch" href="/assets/js/330.b1a092b9.js"><link rel="prefetch" href="/assets/js/331.ff86566f.js"><link rel="prefetch" href="/assets/js/332.0daafa9f.js"><link rel="prefetch" href="/assets/js/333.b7e50524.js"><link rel="prefetch" href="/assets/js/334.7dcf9f0b.js"><link rel="prefetch" href="/assets/js/335.862c410a.js"><link rel="prefetch" href="/assets/js/336.c6384990.js"><link rel="prefetch" href="/assets/js/337.ab9d5e52.js"><link rel="prefetch" href="/assets/js/338.598ae59e.js"><link rel="prefetch" href="/assets/js/339.9b810ff8.js"><link rel="prefetch" href="/assets/js/34.3bd60f1f.js"><link rel="prefetch" href="/assets/js/340.5609a53c.js"><link rel="prefetch" href="/assets/js/341.969d335a.js"><link rel="prefetch" href="/assets/js/342.43f85dba.js"><link rel="prefetch" href="/assets/js/343.47280ef9.js"><link rel="prefetch" href="/assets/js/344.346ae5fc.js"><link rel="prefetch" href="/assets/js/345.32166361.js"><link rel="prefetch" href="/assets/js/346.86ff128b.js"><link rel="prefetch" href="/assets/js/347.3c5421fe.js"><link rel="prefetch" href="/assets/js/348.95910300.js"><link rel="prefetch" href="/assets/js/349.004158d8.js"><link rel="prefetch" href="/assets/js/35.18e8f66a.js"><link rel="prefetch" href="/assets/js/350.e10b195b.js"><link rel="prefetch" href="/assets/js/351.12f89875.js"><link rel="prefetch" href="/assets/js/352.83957394.js"><link rel="prefetch" href="/assets/js/353.475971b9.js"><link rel="prefetch" href="/assets/js/354.8af7b26b.js"><link rel="prefetch" href="/assets/js/355.85925e24.js"><link rel="prefetch" href="/assets/js/356.1d77cf9c.js"><link rel="prefetch" href="/assets/js/357.b467d481.js"><link rel="prefetch" href="/assets/js/358.ac96f32d.js"><link rel="prefetch" href="/assets/js/359.e048bd10.js"><link rel="prefetch" href="/assets/js/36.a7ae257c.js"><link rel="prefetch" href="/assets/js/360.e9b45545.js"><link rel="prefetch" href="/assets/js/361.ad1bb45b.js"><link rel="prefetch" href="/assets/js/362.4e24a30b.js"><link rel="prefetch" href="/assets/js/363.64f7dad5.js"><link rel="prefetch" href="/assets/js/364.d9e3ebc2.js"><link rel="prefetch" href="/assets/js/365.330e3086.js"><link rel="prefetch" href="/assets/js/366.a6c0afb3.js"><link rel="prefetch" href="/assets/js/367.ffcefa40.js"><link rel="prefetch" href="/assets/js/368.664c8e4d.js"><link rel="prefetch" href="/assets/js/369.67da2dd2.js"><link rel="prefetch" href="/assets/js/37.d709f9a9.js"><link rel="prefetch" href="/assets/js/370.b1791970.js"><link rel="prefetch" href="/assets/js/371.743a461a.js"><link rel="prefetch" href="/assets/js/372.7703ef1b.js"><link rel="prefetch" href="/assets/js/373.17de31f6.js"><link rel="prefetch" href="/assets/js/374.e508be9e.js"><link rel="prefetch" href="/assets/js/375.6e2e9fe3.js"><link rel="prefetch" href="/assets/js/376.8ca3511a.js"><link rel="prefetch" href="/assets/js/377.bfcee39c.js"><link rel="prefetch" href="/assets/js/378.21852b78.js"><link rel="prefetch" href="/assets/js/379.9649c307.js"><link rel="prefetch" href="/assets/js/38.68ca920e.js"><link rel="prefetch" href="/assets/js/380.dadb4418.js"><link rel="prefetch" href="/assets/js/381.a03c993d.js"><link rel="prefetch" href="/assets/js/382.bb7c22c1.js"><link rel="prefetch" href="/assets/js/383.bd68b2e5.js"><link rel="prefetch" href="/assets/js/384.f6dc7457.js"><link rel="prefetch" href="/assets/js/385.14287a91.js"><link rel="prefetch" href="/assets/js/386.a6284ac2.js"><link rel="prefetch" href="/assets/js/387.c51f147a.js"><link rel="prefetch" href="/assets/js/388.06d9651e.js"><link rel="prefetch" href="/assets/js/389.2d85d927.js"><link rel="prefetch" href="/assets/js/39.de850db9.js"><link rel="prefetch" href="/assets/js/390.2397b3e0.js"><link rel="prefetch" href="/assets/js/391.8413aaaf.js"><link rel="prefetch" href="/assets/js/392.00eecaa4.js"><link rel="prefetch" href="/assets/js/393.351dd3fd.js"><link rel="prefetch" href="/assets/js/394.d2cc4a70.js"><link rel="prefetch" href="/assets/js/395.abee64bf.js"><link rel="prefetch" href="/assets/js/396.bc265e6a.js"><link rel="prefetch" href="/assets/js/397.e4a96944.js"><link rel="prefetch" href="/assets/js/398.f0d26b29.js"><link rel="prefetch" href="/assets/js/399.e77c3ddc.js"><link rel="prefetch" href="/assets/js/4.2f502b73.js"><link rel="prefetch" href="/assets/js/40.91635261.js"><link rel="prefetch" href="/assets/js/400.c7eac401.js"><link rel="prefetch" href="/assets/js/401.06092d16.js"><link rel="prefetch" href="/assets/js/402.4e08e496.js"><link rel="prefetch" href="/assets/js/403.deba4c77.js"><link rel="prefetch" href="/assets/js/404.9100e4df.js"><link rel="prefetch" href="/assets/js/405.e9f451e2.js"><link rel="prefetch" href="/assets/js/406.a0da4aa4.js"><link rel="prefetch" href="/assets/js/407.58b2b123.js"><link rel="prefetch" href="/assets/js/408.eb2cde2d.js"><link rel="prefetch" href="/assets/js/409.9041f749.js"><link rel="prefetch" href="/assets/js/41.169a3cfc.js"><link rel="prefetch" href="/assets/js/410.c12f3710.js"><link rel="prefetch" href="/assets/js/411.452cda45.js"><link rel="prefetch" href="/assets/js/412.8691317a.js"><link rel="prefetch" href="/assets/js/413.25a68f21.js"><link rel="prefetch" href="/assets/js/414.7a9699d8.js"><link rel="prefetch" href="/assets/js/415.6e8cdaff.js"><link rel="prefetch" href="/assets/js/416.e8a86529.js"><link rel="prefetch" href="/assets/js/417.28330bde.js"><link rel="prefetch" href="/assets/js/418.2fed8e17.js"><link rel="prefetch" href="/assets/js/419.773032f4.js"><link rel="prefetch" href="/assets/js/420.56681228.js"><link rel="prefetch" href="/assets/js/421.0d170e13.js"><link rel="prefetch" href="/assets/js/422.fc8c2a11.js"><link rel="prefetch" href="/assets/js/423.e34ea6a6.js"><link rel="prefetch" href="/assets/js/424.20fe8748.js"><link rel="prefetch" href="/assets/js/425.f001b7cd.js"><link rel="prefetch" href="/assets/js/426.a91230ef.js"><link rel="prefetch" href="/assets/js/427.c6c9fe8d.js"><link rel="prefetch" href="/assets/js/428.9d4f5e41.js"><link rel="prefetch" href="/assets/js/429.c81cfd3f.js"><link rel="prefetch" href="/assets/js/43.f88aa667.js"><link rel="prefetch" href="/assets/js/430.eb61372f.js"><link rel="prefetch" href="/assets/js/431.4a25365a.js"><link rel="prefetch" href="/assets/js/432.42fc1bbe.js"><link rel="prefetch" href="/assets/js/433.8e9ac9f0.js"><link rel="prefetch" href="/assets/js/434.fdd0b160.js"><link rel="prefetch" href="/assets/js/435.d6cbac31.js"><link rel="prefetch" href="/assets/js/436.17750ba2.js"><link rel="prefetch" href="/assets/js/437.a1468099.js"><link rel="prefetch" href="/assets/js/438.ac6a45c2.js"><link rel="prefetch" href="/assets/js/439.242ae27a.js"><link rel="prefetch" href="/assets/js/44.3f36e228.js"><link rel="prefetch" href="/assets/js/440.b80b520c.js"><link rel="prefetch" href="/assets/js/441.e51a4bbb.js"><link rel="prefetch" href="/assets/js/442.ab0b3eda.js"><link rel="prefetch" href="/assets/js/443.47e44250.js"><link rel="prefetch" href="/assets/js/444.54c3b425.js"><link rel="prefetch" href="/assets/js/445.e006c12e.js"><link rel="prefetch" href="/assets/js/446.f2b79730.js"><link rel="prefetch" href="/assets/js/447.2509a397.js"><link rel="prefetch" href="/assets/js/448.b7d69dfc.js"><link rel="prefetch" href="/assets/js/449.8a575d9b.js"><link rel="prefetch" href="/assets/js/45.be1455b1.js"><link rel="prefetch" href="/assets/js/450.ad421aeb.js"><link rel="prefetch" href="/assets/js/451.f09912ae.js"><link rel="prefetch" href="/assets/js/452.f528c4ce.js"><link rel="prefetch" href="/assets/js/453.fc4dc0f9.js"><link rel="prefetch" href="/assets/js/454.733c315c.js"><link rel="prefetch" href="/assets/js/455.44fe35b1.js"><link rel="prefetch" href="/assets/js/456.7f650035.js"><link rel="prefetch" href="/assets/js/457.77ebc183.js"><link rel="prefetch" href="/assets/js/458.133078f4.js"><link rel="prefetch" href="/assets/js/459.33728b5e.js"><link rel="prefetch" href="/assets/js/46.5ad74cb5.js"><link rel="prefetch" href="/assets/js/460.6946f564.js"><link rel="prefetch" href="/assets/js/461.6f906c5c.js"><link rel="prefetch" href="/assets/js/462.26eca27e.js"><link rel="prefetch" href="/assets/js/463.e02e5f65.js"><link rel="prefetch" href="/assets/js/464.0df25c63.js"><link rel="prefetch" href="/assets/js/465.80cd249e.js"><link rel="prefetch" href="/assets/js/466.a0921e86.js"><link rel="prefetch" href="/assets/js/467.1bec2b47.js"><link rel="prefetch" href="/assets/js/468.b6fa37c1.js"><link rel="prefetch" href="/assets/js/469.a1d2487e.js"><link rel="prefetch" href="/assets/js/47.03df5d0a.js"><link rel="prefetch" href="/assets/js/470.36a4b9c8.js"><link rel="prefetch" href="/assets/js/471.28895273.js"><link rel="prefetch" href="/assets/js/472.b9fe392f.js"><link rel="prefetch" href="/assets/js/473.a2835d9c.js"><link rel="prefetch" href="/assets/js/474.cd57b37d.js"><link rel="prefetch" href="/assets/js/475.8d5a9792.js"><link rel="prefetch" href="/assets/js/476.f7f3781c.js"><link rel="prefetch" href="/assets/js/477.9b710b04.js"><link rel="prefetch" href="/assets/js/478.46d66687.js"><link rel="prefetch" href="/assets/js/479.e7444705.js"><link rel="prefetch" href="/assets/js/48.48f286ba.js"><link rel="prefetch" href="/assets/js/480.da2b750a.js"><link rel="prefetch" href="/assets/js/481.838a8e04.js"><link rel="prefetch" href="/assets/js/482.02bf8041.js"><link rel="prefetch" href="/assets/js/483.bb29ef2f.js"><link rel="prefetch" href="/assets/js/484.aebb68bd.js"><link rel="prefetch" href="/assets/js/485.a66ab41b.js"><link rel="prefetch" href="/assets/js/486.8df516fb.js"><link rel="prefetch" href="/assets/js/487.86d28130.js"><link rel="prefetch" href="/assets/js/488.0863da70.js"><link rel="prefetch" href="/assets/js/489.5d4d9e88.js"><link rel="prefetch" href="/assets/js/49.1ca52d11.js"><link rel="prefetch" href="/assets/js/490.3fd65d85.js"><link rel="prefetch" href="/assets/js/491.ae3a2f87.js"><link rel="prefetch" href="/assets/js/492.6f54679b.js"><link rel="prefetch" href="/assets/js/493.a594b1f4.js"><link rel="prefetch" href="/assets/js/494.4f03fae1.js"><link rel="prefetch" href="/assets/js/495.ae50b66b.js"><link rel="prefetch" href="/assets/js/496.bc92d835.js"><link rel="prefetch" href="/assets/js/497.eac65251.js"><link rel="prefetch" href="/assets/js/498.1d726726.js"><link rel="prefetch" href="/assets/js/499.01e4f7d1.js"><link rel="prefetch" href="/assets/js/5.7b1f056c.js"><link rel="prefetch" href="/assets/js/50.73732fe2.js"><link rel="prefetch" href="/assets/js/500.062ade4e.js"><link rel="prefetch" href="/assets/js/501.e6a711dc.js"><link rel="prefetch" href="/assets/js/502.c79e28e2.js"><link rel="prefetch" href="/assets/js/503.bf97bce9.js"><link rel="prefetch" href="/assets/js/504.b2784ef0.js"><link rel="prefetch" href="/assets/js/505.0767ba54.js"><link rel="prefetch" href="/assets/js/506.8ae14637.js"><link rel="prefetch" href="/assets/js/507.003e2349.js"><link rel="prefetch" href="/assets/js/508.ecb5e6bd.js"><link rel="prefetch" href="/assets/js/509.b644f44a.js"><link rel="prefetch" href="/assets/js/51.bed7cf61.js"><link rel="prefetch" href="/assets/js/510.b660946f.js"><link rel="prefetch" href="/assets/js/511.cb186c8f.js"><link rel="prefetch" href="/assets/js/512.d176170f.js"><link rel="prefetch" href="/assets/js/513.18a1afa5.js"><link rel="prefetch" href="/assets/js/514.4a33e931.js"><link rel="prefetch" href="/assets/js/515.8496bd4d.js"><link rel="prefetch" href="/assets/js/516.529b9476.js"><link rel="prefetch" href="/assets/js/517.289738f1.js"><link rel="prefetch" href="/assets/js/518.eda39556.js"><link rel="prefetch" href="/assets/js/519.85b42de5.js"><link rel="prefetch" href="/assets/js/52.22a7da62.js"><link rel="prefetch" href="/assets/js/520.8b531775.js"><link rel="prefetch" href="/assets/js/521.8e4b66fb.js"><link rel="prefetch" href="/assets/js/522.050bfc55.js"><link rel="prefetch" href="/assets/js/523.e973f1e0.js"><link rel="prefetch" href="/assets/js/524.fd160738.js"><link rel="prefetch" href="/assets/js/525.5a4bc307.js"><link rel="prefetch" href="/assets/js/526.361bc4fa.js"><link rel="prefetch" href="/assets/js/527.06ee9d73.js"><link rel="prefetch" href="/assets/js/528.22d9b118.js"><link rel="prefetch" href="/assets/js/529.b7592c16.js"><link rel="prefetch" href="/assets/js/53.767f3bbf.js"><link rel="prefetch" href="/assets/js/530.ad96d564.js"><link rel="prefetch" href="/assets/js/531.61905243.js"><link rel="prefetch" href="/assets/js/532.11aebf61.js"><link rel="prefetch" href="/assets/js/533.0cddb226.js"><link rel="prefetch" href="/assets/js/534.d1c9cc36.js"><link rel="prefetch" href="/assets/js/54.d1f9eec8.js"><link rel="prefetch" href="/assets/js/55.aa90e812.js"><link rel="prefetch" href="/assets/js/56.4d7f81f2.js"><link rel="prefetch" href="/assets/js/57.3c540e8d.js"><link rel="prefetch" href="/assets/js/58.fc1c23f2.js"><link rel="prefetch" href="/assets/js/59.c7a7a4c0.js"><link rel="prefetch" href="/assets/js/6.056886f1.js"><link rel="prefetch" href="/assets/js/60.40e590ae.js"><link rel="prefetch" href="/assets/js/61.e400b323.js"><link rel="prefetch" href="/assets/js/62.bbb30ef1.js"><link rel="prefetch" href="/assets/js/63.c31cd2bb.js"><link rel="prefetch" href="/assets/js/64.62321188.js"><link rel="prefetch" href="/assets/js/65.44adc2b3.js"><link rel="prefetch" href="/assets/js/66.b5740d4f.js"><link rel="prefetch" href="/assets/js/67.76c3624c.js"><link rel="prefetch" href="/assets/js/68.6dd982d4.js"><link rel="prefetch" href="/assets/js/69.eb1390ec.js"><link rel="prefetch" href="/assets/js/7.a96cecf9.js"><link rel="prefetch" href="/assets/js/70.8c882bdd.js"><link rel="prefetch" href="/assets/js/71.001c968a.js"><link rel="prefetch" href="/assets/js/72.ae4ca075.js"><link rel="prefetch" href="/assets/js/73.d6ae6a27.js"><link rel="prefetch" href="/assets/js/74.fba60e37.js"><link rel="prefetch" href="/assets/js/75.0b1bf7bf.js"><link rel="prefetch" href="/assets/js/76.ee19d90e.js"><link rel="prefetch" href="/assets/js/77.fe8ac5f0.js"><link rel="prefetch" href="/assets/js/78.ae09432e.js"><link rel="prefetch" href="/assets/js/79.c1b10e2d.js"><link rel="prefetch" href="/assets/js/80.ae809538.js"><link rel="prefetch" href="/assets/js/81.ca11b4c7.js"><link rel="prefetch" href="/assets/js/82.308b98e4.js"><link rel="prefetch" href="/assets/js/83.355d9dde.js"><link rel="prefetch" href="/assets/js/84.a2b61d48.js"><link rel="prefetch" href="/assets/js/85.cf992fda.js"><link rel="prefetch" href="/assets/js/86.f547c7ea.js"><link rel="prefetch" href="/assets/js/87.2b02746a.js"><link rel="prefetch" href="/assets/js/88.e939aad5.js"><link rel="prefetch" href="/assets/js/89.b000c42a.js"><link rel="prefetch" href="/assets/js/90.dadef001.js"><link rel="prefetch" href="/assets/js/91.c0fe2e32.js"><link rel="prefetch" href="/assets/js/92.e09650b9.js"><link rel="prefetch" href="/assets/js/93.427c7280.js"><link rel="prefetch" href="/assets/js/94.90fc5f58.js"><link rel="prefetch" href="/assets/js/95.13d42b3a.js"><link rel="prefetch" href="/assets/js/96.d0a2ea8c.js"><link rel="prefetch" href="/assets/js/97.cc9a0eda.js"><link rel="prefetch" href="/assets/js/98.3c9f1b7e.js"><link rel="prefetch" href="/assets/js/99.0420dcbc.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.33b2b47d.js">
    <link rel="stylesheet" href="/assets/css/0.styles.40c15e22.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/logo.png" alt="鱼皮的编程宝典" class="logo"> <span class="site-name can-hide">鱼皮的编程宝典</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/学习路线/" class="nav-link">
  学习路线
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="自学之路" class="dropdown-title"><span class="title">自学之路</span> <span class="arrow down"></span></button> <button type="button" aria-label="自学之路" class="mobile-dropdown-title"><span class="title">自学之路</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/自学之路/#大学经历" class="nav-link">
  大学经历
</a></li><li class="dropdown-item"><!----> <a href="/自学之路/#求职经历" class="nav-link">
  求职经历
</a></li><li class="dropdown-item"><!----> <a href="/自学之路/#职场工作" class="nav-link">
  职场工作
</a></li><li class="dropdown-item"><!----> <a href="/自学之路/#创作经历" class="nav-link">
  创作经历
</a></li><li class="dropdown-item"><!----> <a href="/自学之路/#创业经历" class="nav-link">
  创业经历
</a></li><li class="dropdown-item"><!----> <a href="/自学之路/#生活日常" class="nav-link">
  生活日常
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="编程分享" class="dropdown-title"><span class="title">编程分享</span> <span class="arrow down"></span></button> <button type="button" aria-label="编程分享" class="mobile-dropdown-title"><span class="title">编程分享</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/编程分享/#入门必看-学习路线" class="nav-link">
  入门必看-学习路线
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#学习指南" class="nav-link">
  学习指南
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#开发经验" class="nav-link">
  开发经验
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#求职经验" class="nav-link">
  求职经验
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#职场经验" class="nav-link">
  职场经验
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#技术分享" class="nav-link">
  技术分享
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#实战教程" class="nav-link">
  实战教程
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#其他" class="nav-link">
  其他
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#📚-项目教程" class="nav-link">
  项目教程
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#个人作品" class="nav-link">
  个人作品
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#🎁-编程资源" class="nav-link">
  编程资源
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#🌐-科技科普" class="nav-link">
  科技科普
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="项目实战" class="dropdown-title"><span class="title">项目实战</span> <span class="arrow down"></span></button> <button type="button" aria-label="项目实战" class="mobile-dropdown-title"><span class="title">项目实战</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/项目实战/OJ 判题系统.html" class="nav-link">
  OJ 判题系统
</a></li><li class="dropdown-item"><!----> <a href="/项目实战/智能 BI 平台.html" class="nav-link">
  智能 BI 平台
</a></li><li class="dropdown-item"><!----> <a href="/项目实战/聚合搜索平台.html" class="nav-link">
  聚合搜索平台
</a></li><li class="dropdown-item"><!----> <a href="/项目实战/API 开放平台.html" class="nav-link">
  API 开放平台
</a></li><li class="dropdown-item"><!----> <a href="/项目实战/伙伴匹配系统.html" class="nav-link">
  伙伴匹配系统
</a></li><li class="dropdown-item"><!----> <a href="/项目实战/用户中心项目.html" class="nav-link">
  用户中心项目
</a></li><li class="dropdown-item"><!----> <a href="/项目实战/Java 后端万用项目模板.html" class="nav-link">
  Java 后端万用项目模板
</a></li></ul></div></div><div class="nav-item"><a href="/知识碎片/" class="nav-link">
  知识碎片
</a></div><div class="nav-item"><a href="/编程导航/" class="nav-link">
  🔥 编程导航
</a></div><div class="nav-item"><a href="/产品服务/" class="nav-link">
  产品服务
</a></div><div class="nav-item"><a href="/作者/" class="nav-link">
  作者
</a></div> <a href="https://github.com/liyupi/codefather" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/学习路线/" class="nav-link">
  学习路线
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="自学之路" class="dropdown-title"><span class="title">自学之路</span> <span class="arrow down"></span></button> <button type="button" aria-label="自学之路" class="mobile-dropdown-title"><span class="title">自学之路</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/自学之路/#大学经历" class="nav-link">
  大学经历
</a></li><li class="dropdown-item"><!----> <a href="/自学之路/#求职经历" class="nav-link">
  求职经历
</a></li><li class="dropdown-item"><!----> <a href="/自学之路/#职场工作" class="nav-link">
  职场工作
</a></li><li class="dropdown-item"><!----> <a href="/自学之路/#创作经历" class="nav-link">
  创作经历
</a></li><li class="dropdown-item"><!----> <a href="/自学之路/#创业经历" class="nav-link">
  创业经历
</a></li><li class="dropdown-item"><!----> <a href="/自学之路/#生活日常" class="nav-link">
  生活日常
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="编程分享" class="dropdown-title"><span class="title">编程分享</span> <span class="arrow down"></span></button> <button type="button" aria-label="编程分享" class="mobile-dropdown-title"><span class="title">编程分享</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/编程分享/#入门必看-学习路线" class="nav-link">
  入门必看-学习路线
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#学习指南" class="nav-link">
  学习指南
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#开发经验" class="nav-link">
  开发经验
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#求职经验" class="nav-link">
  求职经验
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#职场经验" class="nav-link">
  职场经验
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#技术分享" class="nav-link">
  技术分享
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#实战教程" class="nav-link">
  实战教程
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#其他" class="nav-link">
  其他
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#📚-项目教程" class="nav-link">
  项目教程
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#个人作品" class="nav-link">
  个人作品
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#🎁-编程资源" class="nav-link">
  编程资源
</a></li><li class="dropdown-item"><!----> <a href="/编程分享/#🌐-科技科普" class="nav-link">
  科技科普
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="项目实战" class="dropdown-title"><span class="title">项目实战</span> <span class="arrow down"></span></button> <button type="button" aria-label="项目实战" class="mobile-dropdown-title"><span class="title">项目实战</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/项目实战/OJ 判题系统.html" class="nav-link">
  OJ 判题系统
</a></li><li class="dropdown-item"><!----> <a href="/项目实战/智能 BI 平台.html" class="nav-link">
  智能 BI 平台
</a></li><li class="dropdown-item"><!----> <a href="/项目实战/聚合搜索平台.html" class="nav-link">
  聚合搜索平台
</a></li><li class="dropdown-item"><!----> <a href="/项目实战/API 开放平台.html" class="nav-link">
  API 开放平台
</a></li><li class="dropdown-item"><!----> <a href="/项目实战/伙伴匹配系统.html" class="nav-link">
  伙伴匹配系统
</a></li><li class="dropdown-item"><!----> <a href="/项目实战/用户中心项目.html" class="nav-link">
  用户中心项目
</a></li><li class="dropdown-item"><!----> <a href="/项目实战/Java 后端万用项目模板.html" class="nav-link">
  Java 后端万用项目模板
</a></li></ul></div></div><div class="nav-item"><a href="/知识碎片/" class="nav-link">
  知识碎片
</a></div><div class="nav-item"><a href="/编程导航/" class="nav-link">
  🔥 编程导航
</a></div><div class="nav-item"><a href="/产品服务/" class="nav-link">
  产品服务
</a></div><div class="nav-item"><a href="/作者/" class="nav-link">
  作者
</a></div> <a href="https://github.com/liyupi/codefather" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><a href="/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/" class="sidebar-link">免费学习路线</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>学习路线</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/java%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/" class="sidebar-link">Java 学习路线 by 程序员鱼皮</a></li><li><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/" aria-current="page" class="active sidebar-link">前端学习路线 by 程序员鱼皮</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#路线特点" class="sidebar-link">路线特点</a></li><li class="sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#符号表" class="sidebar-link">符号表</a></li><li class="sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#大纲" class="sidebar-link">大纲</a></li><li class="sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#前言-学编程需要的特质" class="sidebar-link">前言 - 学编程需要的特质</a></li><li class="sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#一、前端入门" class="sidebar-link">一、前端入门</a></li><li class="sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#二、巩固基础" class="sidebar-link">二、巩固基础</a></li><li class="sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#三、前端工程化" class="sidebar-link">三、前端工程化</a></li><li class="sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#四、前端优化" class="sidebar-link">四、前端优化</a></li><li class="sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#五、前端生态" class="sidebar-link">五、前端生态</a></li><li class="sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#六、前端求职" class="sidebar-link">六、前端求职</a></li><li class="sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#七、前端未来" class="sidebar-link">七、前端未来</a></li><li class="sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#我的前端学习路线" class="sidebar-link">我的前端学习路线</a></li><li class="sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#尾声-持续学习" class="sidebar-link">尾声 - 持续学习</a></li></ul></li><li><a href="/c-%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/" class="sidebar-link">C++ 学习路线 by 程序员鱼皮</a></li><li><a href="/python%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/" class="sidebar-link">Python 学习路线 by 程序员鱼皮</a></li><li><a href="/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%92%8C%E7%AE%97%E6%B3%95%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/" class="sidebar-link">数据结构和算法学习路线 by 程序员鱼皮</a></li><li><a href="/sql%E5%85%8D%E8%B4%B9%E5%AE%9E%E6%88%98%E8%87%AA%E5%AD%A6%E7%BD%91%E7%AB%99-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/" class="sidebar-link">SQL 免费实战自学网站 by 程序员鱼皮</a></li><li><a href="/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/" class="sidebar-link">计算机基础学习路线 by 程序员鱼皮</a></li><li><a href="/git-github%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/" class="sidebar-link">Git &amp; GitHub 学习路线 by 程序员鱼皮</a></li><li><a href="/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/" class="sidebar-link">设计模式学习路线 by 程序员鱼皮</a></li><li><a href="/linux%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/" class="sidebar-link">Linux 学习路线 by 程序员鱼皮</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="content"><div style="width:100%"><div class="theme-default-content custom-content content__default"><h1 id="前端学习路线-by-程序员鱼皮"><a href="#前端学习路线-by-程序员鱼皮" class="header-anchor">#</a> 前端学习路线 by 程序员鱼皮</h1> <blockquote><p>本文作者：<a href="https://yuyuanweb.feishu.cn/wiki/Abldw5WkjidySxkKxU2cQdAtnah" target="_blank" rel="noopener noreferrer">程序员鱼皮<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>本站地址：<a href="https://codefather.cn" target="_blank" rel="noopener noreferrer">https://codefather.cn<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></blockquote> <p>💂 + 💻 = 👴🏽</p> <p>建议先观看视频导读：<a href="https://www.bilibili.com/video/BV1nh411e7oG/" target="_blank" rel="noopener noreferrer">https://www.bilibili.com/video/BV1nh411e7oG/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="路线特点"><a href="#路线特点" class="header-anchor">#</a> 路线特点</h2> <ol><li>一份全面的前端知识点大梳理和汇总</li> <li>分阶段学习，每个阶段给出学习目标</li> <li>使用符号对知识点的重要程度做了区分，按需学习</li> <li>知识点附有描述和资源链接</li> <li>提供一份清晰的个人顺序学习路线方法</li> <li>提供大量优质学习资源</li></ol> <h2 id="符号表"><a href="#符号表" class="header-anchor">#</a> 符号表</h2> <p>可根据知识点前的符号按需选学，并获取知识点描述和学习资源。</p> <ul><li>⭐️ 必学（追求速成）</li> <li>✅ 建议学（重要知识）</li> <li>❗ 面试重点</li> <li>❌ 一般没必要学习</li> <li>💬 描述</li> <li>📚 资源</li> <li>🎯 目标</li></ul> <h2 id="大纲"><a href="#大纲" class="header-anchor">#</a> 大纲</h2> <ol><li>前言 - 学编程需要的特质</li> <li>前端学习七阶段
<ol><li>前端入门</li> <li>巩固基础</li> <li>前端工程化</li> <li>前端优化</li> <li>前端生态</li> <li>前端求职</li> <li>前端未来</li></ol></li> <li>我的前端学习路线</li> <li>尾声 - 持续学习</li></ol> <h2 id="前言-学编程需要的特质"><a href="#前言-学编程需要的特质" class="header-anchor">#</a> 前言 - 学编程需要的特质</h2> <p>相信自己有能力，那么你就真的会有！</p> <ul><li>兴趣</li> <li>坚持</li> <li>付出</li> <li>心态</li></ul> <h2 id="一、前端入门"><a href="#一、前端入门" class="header-anchor">#</a> 一、前端入门</h2> <ul><li>💬 描述：学习前端基础三件套，建议从实战开始，边学边练，培养兴趣，快速入门。</li> <li>📚 资源
<ul><li>freeCodecamp 在线编程：<a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">https://www.freecodecamp.org/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>阿里云前端实战学习：<a href="https://edu.aliyun.com/roadmap/frontend" target="_blank" rel="noopener noreferrer">https://edu.aliyun.com/roadmap/frontend<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>W3Cschool 编程入门实战：<a href="https://www.w3cschool.cn/codecamp/" target="_blank" rel="noopener noreferrer">https://www.w3cschool.cn/codecamp/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>pink老师前端入门教程：<a href="https://www.bilibili.com/video/BV14J4114768" target="_blank" rel="noopener noreferrer">https://www.bilibili.com/video/BV14J4114768<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li> <li>🎯 目标：了解和实践各语言的基础语法，并能使用开发工具来独立开发一个留言板网站。</li></ul> <h3 id="⭐️-开发工具"><a href="#⭐️-开发工具" class="header-anchor">#</a> ⭐️ 开发工具</h3> <ul><li>💬 描述：工欲善其事，必先利其器。</li></ul> <h4 id="浏览器"><a href="#浏览器" class="header-anchor">#</a> 浏览器</h4> <ul><li>⭐️ Chrome</li> <li>✅ Edge</li> <li>✅ Firefox</li> <li>❌ Opera</li> <li>Safari</li></ul> <h4 id="编辑器"><a href="#编辑器" class="header-anchor">#</a> 编辑器</h4> <ul><li>⭐️ VSCode</li> <li>✅ WebStorm</li> <li>Atom</li> <li>⭐️ Sublime Text</li> <li>HBuilder X</li> <li>记事本</li> <li>在线 IDE</li></ul> <h4 id="文档笔记"><a href="#文档笔记" class="header-anchor">#</a> 文档笔记</h4> <ul><li>✅ Markdown 语法</li> <li>✅ Typora</li> <li>在线笔记
<ul><li>语雀</li> <li>腾讯文档</li> <li>石墨文档</li> <li>印象笔记</li></ul></li> <li>Mdnice</li></ul> <h3 id="⭐️-html"><a href="#⭐️-html" class="header-anchor">#</a> ⭐️ HTML</h3> <ul><li>💬 描述：用于定义一个网页结构的基本技术。</li> <li>📚 资源：<a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/zh-CN/docs/Learn/HTML<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>⭐️ 基本语法</li> <li>⭐️ 标签
<ul><li>分区 div</li> <li>标题 h1 ~ h6</li> <li>段落 p</li> <li>图像 img</li> <li>列表 ul / ol</li> <li>超链接 a</li> <li>表单 form</li> <li>表格 table</li> <li>框架 iframe</li></ul></li> <li>⭐️ 属性</li> <li>✅ HTML5 特性
<ul><li>语义化标签</li> <li>浏览器支持</li> <li>多媒体标签</li> <li>Canvas 画布</li> <li>❌ 内联 SVG</li> <li>本地存储
<ul><li>localStorage</li> <li>sessionStorage</li> <li>❌ Web SQL</li></ul></li> <li>Web Workers</li> <li>应用缓存（Cache Manifest）</li> <li>无障碍</li></ul></li></ul> <h3 id="⭐️-css"><a href="#⭐️-css" class="header-anchor">#</a> ⭐️ CSS</h3> <ul><li>💬 描述：层叠样式表，用于设计风格和布局。</li> <li>📚 资源：<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/zh-CN/docs/Learn/CSS<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>⭐️ 基本语法</li> <li>⭐️ 引入方式
<ul><li>行内样式</li> <li>内部样式表</li> <li>外部样式表</li></ul></li> <li>⭐️ 选择器
<ul><li>通用选择器</li> <li>标签选择器</li> <li>id 选择器</li> <li>class 选择器</li> <li>属性选择器</li> <li>派生选择器
<ul><li>后代选择器</li> <li>子元素选择器</li> <li>相邻兄弟选择器</li></ul></li> <li>组合选择器</li> <li>伪选择器</li> <li>选择器优先级</li></ul></li> <li>⭐️ 属性
<ul><li>单位
<ul><li>px</li> <li>em</li> <li>rem</li> <li>vw</li> <li>vh</li></ul></li> <li>背景</li> <li>文本</li> <li>字体</li> <li>列表</li> <li>表格</li></ul></li> <li>⭐️ 文档流
<ul><li>标准流</li> <li>浮动流</li> <li>定位流</li></ul></li> <li>⭐️ 内联元素 / 块状元素</li> <li>⭐️ 盒子模型
<ul><li>content</li> <li>padding</li> <li>border</li> <li>margin</li></ul></li> <li>⭐️ 浮动
<ul><li>设置浮动 float</li> <li>清除浮动 clear</li></ul></li> <li>⭐️ 定位
<ul><li>static</li> <li>absolute</li> <li>fixed</li> <li>relative</li> <li>sticky</li></ul></li> <li>⭐️ 层叠规则</li> <li>❗ BFC 和 IFC 机制</li> <li>CSS3
<ul><li>⭐️ 响应式布局
<ul><li>媒体查询</li> <li>Flex 布局</li> <li>Grid 布局</li> <li>瀑布流</li></ul></li> <li>动画</li> <li>过渡</li> <li>渐变</li> <li>背景</li> <li>边框</li> <li>圆角</li> <li>字体</li> <li>2D / 3D 转换</li></ul></li></ul> <h3 id="⭐️-javascript"><a href="#⭐️-javascript" class="header-anchor">#</a> ⭐️ JavaScript</h3> <ul><li>💬 描述：具有函数优先的轻量级，解释型或即时编译型的编程语言。</li> <li>📚 资源：<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>⭐️ 基本语法</li> <li>⭐️ 数据类型
<ul><li>值类型
<ul><li>字符串 String</li> <li>数组 Number</li> <li>布尔 Boolean</li> <li>空值 Null</li> <li>未定义 Undefined</li> <li>Symbol</li></ul></li> <li>引用类型
<ul><li>对象 Object</li> <li>数组 Array</li> <li>函数 Function</li></ul></li></ul></li> <li>✅ 数据类型转换</li> <li>✅ 函数
<ul><li>⭐️ 概念</li> <li>⭐️ 自定义函数</li> <li>调用方式
<ul><li>⭐️ 全局调用</li> <li>构造函数调用</li> <li>⭐️ 函数方法调用</li> <li>apply</li> <li>call</li></ul></li> <li>✅❗ 闭包</li></ul></li> <li>✅ 对象
<ul><li>概念</li> <li>this</li> <li>原型链和继承</li> <li>常用对象
<ul><li>数字 Number</li> <li>字符串 String 对象</li> <li>日期 Date 对象</li> <li>数组 Array</li> <li>布尔 Boolean</li> <li>算数 Math</li></ul></li> <li>自定义对象</li></ul></li> <li>✅❗ 作用域（作用域链）</li> <li>✅ BOM API</li> <li>⭐️ DOM API</li> <li>⭐️ JSON</li> <li>⭐️ Ajax</li> <li>✅ JavaScript 执行机制</li></ul> <h4 id="✅-es6-特性"><a href="#✅-es6-特性" class="header-anchor">#</a> ✅ ES6+ 特性</h4> <ul><li>💬 描述：新引入的 JavaScript 语法特性。</li> <li>📚 资源：ES6 入门教程 <a href="https://es6.ruanyifeng.com/" target="_blank" rel="noopener noreferrer">https://es6.ruanyifeng.com/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>let 和 const</li> <li>变量解构赋值</li> <li>对象扩展和新增方法</li> <li>Symbol</li> <li>Set 和 Map 数据结构</li> <li>⭐️❗ Promise &amp; async / await 异步编程</li> <li>Generator 函数异步编程</li></ul> <h2 id="二、巩固基础"><a href="#二、巩固基础" class="header-anchor">#</a> 二、巩固基础</h2> <ul><li>💬 描述：学习前端、计算机、软件开发相关基础知识，并复习巩固上阶段学到的前端三件套。</li> <li>📚 资源
<ul><li>《JavaScript 高级程序设计》：<a href="https://t.zsxq.com/0eKWGbTgL" target="_blank" rel="noopener noreferrer">https://t.zsxq.com/0eKWGbTgL<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>《JavaScript 忍者秘籍》：<a href="https://www.code-nav.cn/rd/?rid=28ee4e3e606b16c00e3c5b18609e3dc2" target="_blank" rel="noopener noreferrer">https://www.code-nav.cn/rd/?rid=28ee4e3e606b16c00e3c5b18609e3dc2<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li> <li>🎯 目标：熟悉前端三件套语法，尤其是 JavaScript，并了解互联网、域名、浏览器、服务器等，扎实前端程序员的基本功，为下面进入实战开发做准备。</li></ul> <h3 id="前端基础知识"><a href="#前端基础知识" class="header-anchor">#</a> 前端基础知识</h3> <ul><li>✅ 互联网</li> <li>⭐️ 域名</li> <li>⭐️ DNS</li> <li>⭐️ 服务器</li> <li>✅ 浏览器
<ul><li>浏览器 DOM 事件流 / 事件委托</li> <li>⭐️ 浏览器加载顺序</li> <li>⭐️ 浏览器渲染过程</li> <li>浏览器事件循环</li> <li>浏览器同源策略</li> <li>❗ 跨域解决方案</li> <li>浏览器缓存</li> <li>控制台调试技巧</li></ul></li> <li>✅ HTTP
<ul><li>❗ HTTP 请求过程</li> <li>常见 HTTP 协议
<ul><li>HTTP 1.0</li> <li>⭐️ HTTP 1.1</li> <li>HTTP 2</li> <li>HTTP 3</li></ul></li> <li>⭐️ HTTP 请求类别</li> <li>⭐️ 常见状态码
<ul><li>1xx 信息</li> <li>2xx 成功</li> <li>3xx 重定向</li> <li>4xx 客户端错误</li> <li>5xx 服务器错误</li></ul></li> <li>WebSocket</li> <li>⭐️ Cookie</li> <li>Session</li> <li>⭐️ HTTPS</li></ul></li></ul> <h3 id="计算机基础"><a href="#计算机基础" class="header-anchor">#</a> 计算机基础</h3> <h4 id="✅-算法和数据结构"><a href="#✅-算法和数据结构" class="header-anchor">#</a> ✅ 算法和数据结构</h4> <ul><li>⭐️ 时间 / 空间复杂度分析</li> <li>数据结构
<ul><li>数组</li> <li>字符串</li> <li>队列</li> <li>栈</li> <li>链表</li> <li>集合</li> <li>哈希表</li> <li>二叉树</li></ul></li> <li>算法
<ul><li>排序</li> <li>双指针</li> <li>查找</li> <li>分治</li> <li>动态规划</li> <li>递归</li> <li>回溯</li> <li>贪心</li> <li>位运算</li> <li>DFS</li> <li>BFS</li> <li>图</li></ul></li></ul> <h4 id="✅-计算机网络"><a href="#✅-计算机网络" class="header-anchor">#</a> ✅ 计算机网络</h4> <ul><li>HTTP 协议</li> <li>网络模型</li> <li>UDP / TCP 协议</li></ul> <h4 id="✅-操作系统"><a href="#✅-操作系统" class="header-anchor">#</a> ✅ 操作系统</h4> <ul><li>进程、线程</li> <li>进程 / 线程间通讯方式</li> <li>进程调度算法</li> <li>进程 / 线程状态</li> <li>死锁</li> <li>内存管理</li></ul> <h3 id="软件开发基础"><a href="#软件开发基础" class="header-anchor">#</a> 软件开发基础</h3> <h4 id="✅-设计模式"><a href="#✅-设计模式" class="header-anchor">#</a> ✅ 设计模式</h4> <ul><li>单例模式</li> <li>代理模式</li> <li>工厂模式</li> <li>装饰者模式</li> <li>观察者模式</li> <li>策略模式</li> <li>门面模式</li></ul> <h4 id="⭐️-git-版本控制"><a href="#⭐️-git-版本控制" class="header-anchor">#</a> ⭐️ Git 版本控制</h4> <ul><li>常用命令</li></ul> <h4 id="✅-linux-服务器"><a href="#✅-linux-服务器" class="header-anchor">#</a> ✅ Linux 服务器</h4> <ul><li>常用命令</li></ul> <h4 id="✅-正则表达式"><a href="#✅-正则表达式" class="header-anchor">#</a> ✅ 正则表达式</h4> <h2 id="三、前端工程化"><a href="#三、前端工程化" class="header-anchor">#</a> 三、前端工程化</h2> <ul><li>💬 描述：前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高开发过程中的开发效率，减少不必要的重复工作时间。</li> <li>📚 资源
<ul><li>什么是前端工程化？<a href="https://www.zhihu.com/question/433854153/answer/1713597311" target="_blank" rel="noopener noreferrer">https://www.zhihu.com/question/433854153/answer/1713597311<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li> <li>🎯 目标：至少学会一门主流的前端开发框架（Vue / React），并配合脚手架、组件库、工具等从 0 开始独立搭建并开发一个完整的前端网站，可以试着仿一些知名站点。要求遵循企业开发规范，将项目代码提交到代码仓库中，并独立发布上线，供他人访问。此外，建议抓住机会参与一些团队项目，感受团队开发模式和前端工程化的优势。</li></ul> <h3 id="⭐️-研发流程"><a href="#⭐️-研发流程" class="header-anchor">#</a> ⭐️ 研发流程</h3> <ol><li>技术选型</li> <li>初始化</li> <li>开发</li> <li>本地测试</li> <li>代码提交</li> <li>编译、打包、构建</li> <li>部署</li> <li>集成测试</li> <li>发布上线</li> <li>监控运维</li></ol> <h3 id="⭐️-代码托管"><a href="#⭐️-代码托管" class="header-anchor">#</a> ⭐️ 代码托管</h3> <ul><li>💬 描述：集中存储、备份你的代码，还能和团队成员协作开发。</li> <li>⭐️ GitHub</li> <li>Gitee</li> <li>GitLab</li></ul> <h3 id="✅-node-js"><a href="#✅-node-js" class="header-anchor">#</a> ✅ Node.JS</h3> <ul><li>💬 描述：一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！</li> <li>📚 资源
<ul><li>Node.js 官方教程：<a href="http://nodejs.cn/learn" target="_blank" rel="noopener noreferrer">http://nodejs.cn/learn<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>Node.js 入门：<a href="https://cnodejs.org/getstart" target="_blank" rel="noopener noreferrer">https://cnodejs.org/getstart<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <h4 id="⭐️-包管理"><a href="#⭐️-包管理" class="header-anchor">#</a> ⭐️ 包管理</h4> <ul><li>💬 描述：用于安装 Node.js 的扩展、工具等。</li> <li>⭐️ npm</li> <li>⭐️ yarn</li> <li>❌ bower</li> <li>✅ npx</li></ul> <h4 id="开发框架"><a href="#开发框架" class="header-anchor">#</a> 开发框架</h4> <ul><li>Express</li> <li>Koa</li> <li>Egg</li></ul> <h3 id="开发框架-2"><a href="#开发框架-2" class="header-anchor">#</a> 开发框架</h3> <ul><li>💬 描述：解决特定的问题,提高_开发_效率、简化我们的代码复杂度。</li></ul> <h4 id="⭐️-css-框架"><a href="#⭐️-css-框架" class="header-anchor">#</a> ⭐️ CSS 框架</h4> <ul><li>✅ BootStrap</li> <li>⭐️ Tailwind CSS</li></ul> <h4 id="⭐️-javascript-框架"><a href="#⭐️-javascript-框架" class="header-anchor">#</a> ⭐️ JavaScript 框架</h4> <h5 id="⭐️-vue"><a href="#⭐️-vue" class="header-anchor">#</a> ⭐️ Vue</h5> <ul><li>Vue Router</li> <li>Vuex</li></ul> <h5 id="⭐️-react"><a href="#⭐️-react" class="header-anchor">#</a> ⭐️ React</h5> <ul><li>React DOM</li> <li>React Router</li> <li>Redux</li> <li>MobX</li> <li>React Hooks</li></ul> <h5 id="❌-angular"><a href="#❌-angular" class="header-anchor">#</a> ❌ Angular</h5> <ul><li>RxJS</li> <li>NgRx</li></ul> <h5 id="✅-svelte"><a href="#✅-svelte" class="header-anchor">#</a> ✅ Svelte</h5> <h5 id="✅-umijs"><a href="#✅-umijs" class="header-anchor">#</a> ✅ UmiJS</h5> <h3 id="封装库"><a href="#封装库" class="header-anchor">#</a> 封装库</h3> <h4 id="⭐️-组件库"><a href="#⭐️-组件库" class="header-anchor">#</a> ⭐️ 组件库</h4> <ul><li>✅ LayUI</li> <li>⭐️ ElementUI（Vue）</li> <li>✅ VantUI（Vue）</li> <li>⭐️ Ant Design（React）</li> <li>Material UI</li></ul> <h4 id="数据可视化"><a href="#数据可视化" class="header-anchor">#</a> 数据可视化</h4> <ul><li>✅ AntV</li> <li>Apache ECharts</li> <li>HighCharts</li> <li>D3.js</li></ul> <h4 id="组件-插件"><a href="#组件-插件" class="header-anchor">#</a> 组件（插件）</h4> <ul><li>富文本编辑器</li> <li>弹窗</li> <li>轮播图</li></ul> <h4 id="工具库"><a href="#工具库" class="header-anchor">#</a> 工具库</h4> <ul><li>✅ jQuery</li> <li>✅ Lodash</li> <li>✅ Axios</li> <li>时间处理 Moment.js</li></ul> <h4 id="动效库"><a href="#动效库" class="header-anchor">#</a> 动效库</h4> <ul><li>✅ Animate.css</li> <li>Ant Motion</li></ul> <h4 id="字体图标库"><a href="#字体图标库" class="header-anchor">#</a> 字体图标库</h4> <ul><li>⭐️ IconFont</li> <li>IconPark</li> <li>Font Awesome</li></ul> <h3 id="⭐️-脚手架"><a href="#⭐️-脚手架" class="header-anchor">#</a> ⭐️ 脚手架</h3> <ul><li>💬 描述：快速生成新项目的目录模板，提升开发效率和开发舒适性。</li> <li>📚 资源：<a href="https://www.jianshu.com/p/25ce8cf2e6a7" target="_blank" rel="noopener noreferrer">https://www.jianshu.com/p/25ce8cf2e6a7<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>Vue CLI</li> <li>create-react-app</li> <li>✅ Yeoman</li></ul> <h3 id="⭐️-前端架构设计"><a href="#⭐️-前端架构设计" class="header-anchor">#</a> ⭐️ 前端架构设计</h3> <ul><li>💬 描述：一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效可持续的工作流。</li> <li>模块化</li> <li>组件化</li> <li>✅ MVVM</li> <li>设计原则</li> <li>⭐️ SPA 单页应用</li> <li>⭐️ 多页应用</li> <li>✅ 前端路由</li> <li>PWA</li> <li>有损服务</li></ul> <h4 id="✅-服务端渲染"><a href="#✅-服务端渲染" class="header-anchor">#</a> ✅ 服务端渲染</h4> <ul><li>💬 描述：在服务端渲染 HTML 页面的模式。</li> <li>📚 资源：<a href="https://www.zhihu.com/question/379563505" target="_blank" rel="noopener noreferrer">https://www.zhihu.com/question/379563505<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>Next.js（React）</li> <li>Nuxt.js（Vue）</li> <li>❌ Universal（Angular）</li></ul> <h4 id="bff"><a href="#bff" class="header-anchor">#</a> BFF</h4> <ul><li>💬 描述：Backend For Frontend（服务于前端的后端），就是服务器设计 API 时会考虑前端的使用，并在服务端直接进行业务逻辑的处理。</li> <li>📚 资源：<a href="https://www.jianshu.com/p/eb1875c62ad3" target="_blank" rel="noopener noreferrer">https://www.jianshu.com/p/eb1875c62ad3<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>GraphQL</li></ul> <h4 id="✅-微前端"><a href="#✅-微前端" class="header-anchor">#</a> ✅ 微前端</h4> <ul><li>💬 描述：将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，从而解决庞大的一整块后端服务带来的变更与扩展方面的限制。</li> <li>📚 资源：<a href="https://zhuanlan.zhihu.com/p/96464401" target="_blank" rel="noopener noreferrer">https://zhuanlan.zhihu.com/p/96464401<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>qiankun</li> <li>single-spa</li></ul> <h3 id="css-in-js"><a href="#css-in-js" class="header-anchor">#</a> CSS in JS</h3> <ul><li>💬 描述：用 JavaScript 来写 CSS。</li> <li>📚 资源：<a href="http://www.ruanyifeng.com/blog/2017/04/css_in_js.html" target="_blank" rel="noopener noreferrer">http://www.ruanyifeng.com/blog/2017/04/css_in_js.html<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>内联样式</li> <li>声明样式</li> <li>引入样式</li></ul> <h4 id="⭐️-css-模块化"><a href="#⭐️-css-模块化" class="header-anchor">#</a> ⭐️ CSS 模块化</h4> <ul><li>⭐️ CSS Modules</li> <li>✅ styled-components</li> <li>✅ Styled JSX</li> <li>Emotion</li></ul> <h3 id="✅-开发调试"><a href="#✅-开发调试" class="header-anchor">#</a> ✅ 开发调试</h3> <ul><li>💬 描述：本地开发时热更新，提升开发效率。</li> <li>webpack-dev-server</li> <li>serve</li></ul> <h4 id="内网穿透"><a href="#内网穿透" class="header-anchor">#</a> 内网穿透</h4> <ul><li>💬 描述：将内网外网通过 nat 隧道打通，让内网的网站、数据让外网可以访问。</li> <li>Ngrok</li> <li>NATAPP</li></ul> <h3 id="⭐️-css-预编译"><a href="#⭐️-css-预编译" class="header-anchor">#</a> ⭐️ CSS 预编译</h3> <ul><li>💬 描述：使用新的扩展语言以增强 CSS 的能力，并通过预编译的方式将其转换为浏览器认识的 CSS 代码。</li> <li>⭐️ SASS</li> <li>✅ PostCSS</li> <li>Stylus</li> <li>❌ LESS</li></ul> <h3 id="测试"><a href="#测试" class="header-anchor">#</a> 测试</h3> <h4 id="测试分类"><a href="#测试分类" class="header-anchor">#</a> 测试分类</h4> <ul><li>⭐️ UT 单元测试</li> <li>SIT 系统集成测试</li> <li>E2E 端到端测试</li> <li>UAT 用户验收测试</li></ul> <h4 id="✅-mock"><a href="#✅-mock" class="header-anchor">#</a> ✅ Mock</h4> <ul><li>💬 描述：通过随机数据，模拟各种场景，增加单元测试的真实性。</li> <li>Mock.js</li></ul> <h4 id="✅-测试框架"><a href="#✅-测试框架" class="header-anchor">#</a> ✅ 测试框架</h4> <ul><li>✅ Jest</li> <li>Enzyme</li> <li>✅ Puppeteer（Headless Browser）</li> <li>Mocha</li> <li>Jasmine</li></ul> <h3 id="✅-代码质量"><a href="#✅-代码质量" class="header-anchor">#</a> ✅ 代码质量</h3> <h4 id="开发规范"><a href="#开发规范" class="header-anchor">#</a> 开发规范</h4> <ul><li>💬 描述：依照规范写出的代码会更加合理。</li> <li>📚 资源：Airbnb 代码规范 <a href="https://github.com/BingKui/javascript-zh" target="_blank" rel="noopener noreferrer">https://github.com/BingKui/javascript-zh<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>CSS Style Guide</li> <li>JavaScript Style Guide</li></ul> <h4 id="类型校验"><a href="#类型校验" class="header-anchor">#</a> 类型校验</h4> <ul><li>TypeScript</li></ul> <h4 id="代码检查"><a href="#代码检查" class="header-anchor">#</a> 代码检查</h4> <ul><li>ESLint</li> <li>StyleLint</li></ul> <h4 id="代码风格"><a href="#代码风格" class="header-anchor">#</a> 代码风格</h4> <ul><li>💬 描述：根据配置自动格式化代码，统一格式。</li> <li>Prettier</li></ul> <h4 id="提交规范"><a href="#提交规范" class="header-anchor">#</a> 提交规范</h4> <ul><li>约定式提交</li></ul> <h4 id="提交检查"><a href="#提交检查" class="header-anchor">#</a> 提交检查</h4> <ul><li>💬 描述：在提交代码时触发一些操作，比如检查代码的风格等。</li> <li>pre-commit</li> <li>husky</li></ul> <h3 id="构建工具"><a href="#构建工具" class="header-anchor">#</a> 构建工具</h3> <h4 id="自动化构建"><a href="#自动化构建" class="header-anchor">#</a> 自动化构建</h4> <ul><li>💬 描述：按照配置好的流程自动打包构建项目，提高团队的开发效率，降低项目的维护难度。</li> <li>Gulp</li> <li>✅ npm script</li> <li>Grunt</li></ul> <h4 id="打包工具"><a href="#打包工具" class="header-anchor">#</a> 打包工具</h4> <ul><li>💬 描述：将各种零散的📚 资源文件打包为可在浏览器等环境运行的代码。</li> <li>⭐️ Webpack</li> <li>✅ Rollup</li> <li>✅ Vite</li> <li>Parcel</li> <li>Snowpack</li></ul> <h3 id="ci-cd"><a href="#ci-cd" class="header-anchor">#</a> CI / CD</h3> <ul><li>💬 描述：通过在应用开发阶段引入自动化来频繁向客户交付应用。</li> <li>GitLab CI</li> <li>✅ Jenkins</li></ul> <h3 id="部署"><a href="#部署" class="header-anchor">#</a> 部署</h3> <h4 id="⭐️-web-服务器"><a href="#⭐️-web-服务器" class="header-anchor">#</a> ⭐️ Web 服务器</h4> <h5 id="⭐️-nginx"><a href="#⭐️-nginx" class="header-anchor">#</a> ⭐️ Nginx</h5> <ul><li>💬 描述：高性能的 HTTP 和反向代理 web 服务器。</li> <li>📚 资源：腾讯云动手实验室 <a href="https://cloud.tencent.com/developer/labs/gallery" target="_blank" rel="noopener noreferrer">https://cloud.tencent.com/developer/labs/gallery<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>反向代理</li> <li>解决跨域</li> <li>改写请求</li></ul> <h5 id="✅-apache"><a href="#✅-apache" class="header-anchor">#</a> ✅ Apache</h5> <h4 id="容器"><a href="#容器" class="header-anchor">#</a> 容器</h4> <h5 id="✅-docker"><a href="#✅-docker" class="header-anchor">#</a> ✅ Docker</h5> <ul><li>💬 描述：容器是一个标准化的软件单元，它将代码及其所有依赖关系打包，以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。Docker容器镜像是一个轻量的独立的可执行的软件包。包含程序运行的时候所需的一切：代码，运行时间，系统工具，系统库和设置。</li> <li>📚 资源：Docker 从入门到实践 <a href="https://vuepress.mirror.docker-practice.com/" target="_blank" rel="noopener noreferrer">https://vuepress.mirror.docker-practice.com/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>Dockerfile</li></ul> <h5 id="kubernetes"><a href="#kubernetes" class="header-anchor">#</a> Kubernetes</h5> <h4 id="部署策略"><a href="#部署策略" class="header-anchor">#</a> 部署策略</h4> <ul><li>全量发布</li> <li>蓝绿部署</li> <li>滚动发布</li> <li>灰度发布</li></ul> <h3 id="监控告警"><a href="#监控告警" class="header-anchor">#</a> 监控告警</h3> <ul><li>前端埋点</li> <li>错误监控</li> <li>性能监控</li> <li>行为监控</li></ul> <h2 id="四、前端优化"><a href="#四、前端优化" class="header-anchor">#</a> 四、前端优化</h2> <ul><li>💬 描述：通过分析和优化手段，提高网站的性能和用户体验。</li> <li>🎯 目标：实践前端优化方法，从多个方面优化自己做过的项目，最好能将优化后的网站与原网站进行对比，得到一些数据和体验上的明显提升。</li></ul> <h3 id="✅-性能优化"><a href="#✅-性能优化" class="header-anchor">#</a> ✅ 性能优化</h3> <h4 id="性能指标"><a href="#性能指标" class="header-anchor">#</a> 性能指标</h4> <ul><li>💬 描述：用于衡量一个 Web 页面的性能。</li> <li>📚 资源：<a href="https://juejin.cn/post/6844904153869713416" target="_blank" rel="noopener noreferrer">https://juejin.cn/post/6844904153869713416<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>FP（First Paint）
<ul><li>💬 描述：从开始加载到浏览器首次绘制像素到屏幕上的时间，也就是页面在屏幕上首次发生视觉变化的时间。</li></ul></li> <li>FCP（First Contentful Paint）
<ul><li>💬 描述：浏览器首次绘制来自 DOM 的内容的时间。</li></ul></li> <li>FMP（First Meaningful Paint）
<ul><li>💬 描述：页面的主要内容绘制到屏幕上的时间。</li></ul></li> <li>FSP（First Screen Paint）
<ul><li>💬 描述：页面从开始加载到首屏内容全部绘制完成的时间，用户可以看到首屏的全部内容。</li></ul></li> <li>TTI（Time to Interactive）
<ul><li>💬 描述：表示网页第一次完全达到可交互状态的时间点，浏览器已经可以持续性的响应用户的输入。</li></ul></li></ul> <h4 id="优化手段"><a href="#优化手段" class="header-anchor">#</a> 优化手段</h4> <ul><li>性能监控
<ul><li>Performance API</li></ul></li> <li>样式优化</li> <li>JavaScript 优化
<ul><li>防抖</li> <li>节流</li></ul></li> <li>代码分割</li> <li>📚 资源压缩</li> <li>打包优化</li> <li>服务器优化</li> <li>缓存优化
<ul><li>Service Worker</li></ul></li> <li>动画性能</li> <li>dns-prefetch</li> <li>Lazy loading</li> <li>优化启动性能
<ul><li>异步化</li></ul></li> <li>渲染优化</li> <li>网络优化</li> <li>移动端性能优化</li> <li>✅ CDN
<ul><li>💬 描述：内容分发网络，是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。</li> <li>📚 资源：BootCDN <a href="https://www.bootcdn.cn/" target="_blank" rel="noopener noreferrer">https://www.bootcdn.cn/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul> <h3 id="用户体验"><a href="#用户体验" class="header-anchor">#</a> 用户体验</h3> <ul><li>设计系统</li> <li>骨架屏</li></ul> <h3 id="✅-兼容性"><a href="#✅-兼容性" class="header-anchor">#</a> ✅ 兼容性</h3> <h4 id="浏览器兼容性"><a href="#浏览器兼容性" class="header-anchor">#</a> 浏览器兼容性</h4> <ul><li>normalize.css</li> <li>html5shiv.js</li> <li>respond.js</li> <li>Babel</li> <li>Polyfill</li></ul> <h4 id="屏幕分辨率兼容性"><a href="#屏幕分辨率兼容性" class="header-anchor">#</a> 屏幕分辨率兼容性</h4> <h4 id="跨平台兼容性"><a href="#跨平台兼容性" class="header-anchor">#</a> 跨平台兼容性</h4> <h3 id="seo"><a href="#seo" class="header-anchor">#</a> SEO</h3> <ul><li>💬 描述：搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。</li> <li>📚 资源：百度搜索📚 资源平台 <a href="https://ziyuan.baidu.com/cooperateresource/index" target="_blank" rel="noopener noreferrer">https://ziyuan.baidu.com/cooperateresource/index<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>robots.txt</li> <li>description</li> <li>keywords</li> <li>SiteMap</li> <li>HTML 标签优化</li> <li>站内链接建设</li> <li>友情链接</li></ul> <h3 id="✅-安全"><a href="#✅-安全" class="header-anchor">#</a> ✅ 安全</h3> <ul><li>⭐️ XSS</li> <li>CSRF</li> <li>反爬虫</li> <li>SQL 注入</li> <li>DDoS</li></ul> <h2 id="五、前端生态"><a href="#五、前端生态" class="header-anchor">#</a> 五、前端生态</h2> <ul><li>💬 描述：如今，前端领域的范围越来越广，出现了更多前端工程师需要了解和关注的技术。</li> <li>🎯 目标：能用学到的前端技术去做更多的事情，比如开发个人博客、文档网站、小程序、APP 等。</li></ul> <h3 id="⭐️-静态站点构建"><a href="#⭐️-静态站点构建" class="header-anchor">#</a> ⭐️ 静态站点构建</h3> <h4 id="开发"><a href="#开发" class="header-anchor">#</a> 开发</h4> <ul><li>React Static</li></ul> <h4 id="博客"><a href="#博客" class="header-anchor">#</a> 博客</h4> <ul><li>✅ Gatsby.js</li> <li>✅ Docusaurus</li> <li>Hugo</li> <li>Hexo</li></ul> <h4 id="文档"><a href="#文档" class="header-anchor">#</a> 文档</h4> <ul><li>JekyII</li> <li>⭐️ Docsify</li> <li>VuePress</li> <li>✅ Dumi</li></ul> <h3 id="✅-大前端"><a href="#✅-大前端" class="header-anchor">#</a> ✅ 大前端</h3> <p>💬 描述：前端技术的融合更加紧密，应用的领域也更加广泛，前端领域的内容呈现多样化，除了网站外，还可以用前端技术跨平台开发 Android、iOS、小程序、虚拟现实、增强现实等。</p> <h4 id="移动应用"><a href="#移动应用" class="header-anchor">#</a> 移动应用</h4> <ul><li>Hybrid</li> <li>WebView</li> <li>React Native</li> <li>Flutter</li></ul> <h4 id="移动应用打包"><a href="#移动应用打包" class="header-anchor">#</a> 移动应用打包</h4> <ul><li>Weex</li> <li>Cordova</li> <li>Phonegap</li> <li>Ionic</li></ul> <h4 id="桌面应用"><a href="#桌面应用" class="header-anchor">#</a> 桌面应用</h4> <ul><li>Electron</li> <li>NW.js</li> <li>Proton Native</li></ul> <h4 id="小程序"><a href="#小程序" class="header-anchor">#</a> 小程序</h4> <ul><li>原生</li> <li>WebView</li></ul> <h4 id="跨端开发框架"><a href="#跨端开发框架" class="header-anchor">#</a> 跨端开发框架</h4> <ul><li>✅ uni-app</li> <li>✅ Taro</li> <li>Flutter</li> <li>Chameleon</li> <li>Wepy</li> <li>Rax</li></ul> <h4 id="移动端调试"><a href="#移动端调试" class="header-anchor">#</a> 移动端调试</h4> <ul><li>Chrome Dev Tools</li> <li>Android Simulator</li> <li>IOS Simulator</li></ul> <h3 id="✅-serverless"><a href="#✅-serverless" class="header-anchor">#</a> ✅ Serverless</h3> <ul><li>💬 描述：一种构建和管理基于微服务架构的完整流程，允许你在服务部署级别而不是服务器部署级别来管理你的应用部署，你甚至可以管理某个具体功能或端口的部署，这就能让开发者快速迭代，更快速地开发软件。</li></ul> <h3 id="✅-云开发"><a href="#✅-云开发" class="header-anchor">#</a> ✅ 云开发</h3> <ul><li>💬 描述：云端一体化的后端云服务 ，采用 Serverless 架构，免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具（CLI）、Flutter SDK 等能力降低了应用开发的门槛。使用云开发可以构建完整的小程序/小游戏、H5、Web、移动 App 等应用。</li> <li>✅ 腾讯云云开发</li> <li>阿里云云开发</li></ul> <h3 id="低代码"><a href="#低代码" class="header-anchor">#</a> 低代码</h3> <ul><li>💬 描述：无需编码（零代码）或通过少量代码就可以快速生成应用程序的开发平台。通过可视化进行应用程序开发的方法，使具有不同经验水平的开发人员可以通过图形化的用户界面，使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。</li> <li>腾讯云低码</li> <li>阿里宜搭</li></ul> <h2 id="六、前端求职"><a href="#六、前端求职" class="header-anchor">#</a> 六、前端求职</h2> <ul><li>💬 描述：求职是一个漫长的过程，建议拉长战线，尽早准备。</li> <li>🎯 目标：找到理想的工作。</li></ul> <h3 id="简历"><a href="#简历" class="header-anchor">#</a> 简历</h3> <ul><li>老鱼简历：<a href="https://laoyujianli.com/" target="_blank" rel="noopener noreferrer">https://laoyujianli.com/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>（1 分钟帮你生成精美的个人简历）</li></ul> <h3 id="面试题库"><a href="#面试题库" class="header-anchor">#</a> 面试题库</h3> <ul><li>编程导航精选面试题汇总：<a href="https://yuyuanweb.feishu.cn/wiki/CmFywXs0Oi0MS9kU3yocJugFn2e" target="_blank" rel="noopener noreferrer">https://yuyuanweb.feishu.cn/wiki/CmFywXs0Oi0MS9kU3yocJugFn2e<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>前端面试每日 3+1：<a href="https://github.com/haizlin/fe-interview" target="_blank" rel="noopener noreferrer">https://github.com/haizlin/fe-interview<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>React 面试题目 &amp; 题解：<a href="https://github.com/sudheerj/reactjs-interview-questions" target="_blank" rel="noopener noreferrer">https://github.com/sudheerj/reactjs-interview-questions<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="面经"><a href="#面经" class="header-anchor">#</a> 面经</h3> <ul><li>编程导航面经汇总：<a href="https://yuyuanweb.feishu.cn/wiki/PLHrwcEPCiJcxXk7Ki4csRoJn2f" target="_blank" rel="noopener noreferrer">https://yuyuanweb.feishu.cn/wiki/PLHrwcEPCiJcxXk7Ki4csRoJn2f<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="七、前端未来"><a href="#七、前端未来" class="header-anchor">#</a> 七、前端未来</h2> <ul><li>💬 描述：前端未来可能的发展趋势和热门技术。</li> <li>🎯 目标：关注前沿，持续进步。</li> <li>WebAssembly</li> <li>智能 UI</li> <li>React Server Component</li> <li>CSS Houdini</li></ul> <h3 id="webcomponents"><a href="#webcomponents" class="header-anchor">#</a> WebComponents</h3> <ul><li>HTML templates（HTML模板）</li> <li>Custom elements（自定义元素）</li> <li>Shadow DOM（影子DOM）</li></ul> <h2 id="我的前端学习路线"><a href="#我的前端学习路线" class="header-anchor">#</a> 我的前端学习路线</h2> <p>虽然上面整理的学习路线知识点非常多，但是大家也别太担心，其实按照一定顺序和方法来学习，并不会很难，聊聊我的学习经历。</p> <h3 id="_1-快速入门-培养兴趣"><a href="#_1-快速入门-培养兴趣" class="header-anchor">#</a> 1. 快速入门，培养兴趣</h3> <p>刚开始学习前端时，一定要以培养兴趣、快速入门为目标。我入门前端时，由于没有基础、啥都不懂，因此选择在线实战教程网站来学习，跟着教程案例一行行把代码敲下来，实时浏览显示效果，很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时，我对看过的知识点没有什么印象，基本是看了就忘，当我想要自己写一个网站，也根本无从下手。</p> <p>于是，我开始试着死记硬背代码，结果发现背了之后还是不会写。那干脆一不做二不休，直接打开编辑器和教程网站，把之前在线实战时敲过的代码复制粘贴到编辑器中，然后再修改保存，到浏览器中打开文件。这样虽然要在编辑器和浏览器中来回切换，但起码能看到自己的网页文件运行的效果了。后来，我利用浏览器开发者工具提升了自己开发网站的调试效率，敲出的代码达不到满意的效果时，就再去查，再改，再浏览，最后终于完成了一个留言板网站！</p> <p>通过这件事，我明白了一个道理，既然记不住知识，那就先别强行记忆，上手多写，忘了就去查不就好了？不要担心自己知识不够做不出来，只要你去试，都一定能实现。</p> <h3 id="_2-多看多写-巩固基础"><a href="#_2-多看多写-巩固基础" class="header-anchor">#</a> 2. 多看多写，巩固基础</h3> <p>在这种操作下，我虽然能使用基础三件套开发简易网站了，但做的很慢，还老出问题。于是，我开始完整地看了几本前端入门和项目实战书籍，有三件套入门的，也有响应式网站设计的，还有 JavaScript 综合讲解的，以及一套完整的视频教程，通过这些来复习巩固之前学过的知识，打好了基础，并且了解了更多实战教程上没见到的知识。</p> <p>看书和视频的过程中，我跟着做了几个简易的网站，也是边看边做。在这之后，我发现自己渐渐地能够脱离文档来写网站了！</p> <h3 id="_3-框架学习-学以致用"><a href="#_3-框架学习-学以致用" class="header-anchor">#</a> 3. 框架学习，学以致用</h3> <p>但是，总感觉开发网站时，什么都要自己写，重复的代码写一大堆，很麻烦。于是，我试着上网搜了解决这些问题的方法，发现可以用组件库减少重复编写 HTML 和 CSS 代码，于是学了 LayUI，其实和之前一样的，就是打开官网找到要用的组件，然后复制到项目中修改就行了，写的多了竟然还真记住了一些（虽然这个没必要记）。</p> <p>界面和样式代码简化了，但是 JavaScript 写的我依旧头疼。于是我决定进入下一个阶段的学习，当时先看了本书叫《锋利的 jQuery》来学习 jQuery，学会之后使用它趁热打铁做了几个网站，发现的确能大大简化繁琐的 JavaScript DOM 操作，让我尝到了甜头，又有了继续学习前端的动力。</p> <p>在那之后大概半年，我开始学习主流前端框架 Vue，也是跟着视频教程学，并且结合 ElementUI 组件库开发了一个响应式网站。不得不说，习惯了用原生 JavaScript 和 jQuery 开发后，再去用 Vue 开发，真的是爽飞了，小有成就感。</p> <h3 id="_4-根据需要-自主学习"><a href="#_4-根据需要-自主学习" class="header-anchor">#</a> 4. 根据需要，自主学习</h3> <p>在那之后，我就是通过不断地做项目来积累经验，既然编程知识太多学不完，那我就随需随学，逐渐拓宽自己的知识面。举个例子，我要做一个移动端 H5 页面，那就去搜 Vue 的移动端组件库，学会了 MintUI、VantUI 等；项目中要处理日期，那我就去搜日期处理库，学会了 Moment.js；项目重复文件和代码太多，我就去网上搜一些组件化、模块化的最佳实践；项目代码太大、加载太慢，我就去网上搜一些前端压缩、性能优化的方式；要把开发好的项目变成 APP，那我就去网上搜到了 Cordova 等打包工具；跟其他同学一起做项目时比较混乱、开发效率低，我就去搜了一些代码规范、前端工程化等；遇到 Bug 时，也是自己去网上搜索解决方案，并且还要看看有没有知识点是我遗漏的，我会再去弥补学习。通过不断实践、不断遇到问题和自主解决问题，我始终保持着学习的积极性，学到了越来越多前端的知识，并通过归纳总结来加深印象。</p> <h3 id="_5-渐入佳境-拓宽视野"><a href="#_5-渐入佳境-拓宽视野" class="header-anchor">#</a> 5. 渐入佳境，拓宽视野</h3> <p>在那之后，我学前端技术非常快了，像 React、TypeScript、Redux、Dva、Umi、Lerna 等等都随用随学，随学随用。此外，我不仅仅关注前端网页开发本身，还同时关注前端的生态和发展，学习了微前端、Serverless、云开发、低代码等技术，因此个人的能力提升也很大。如今在鹅厂工作中也是，面对各种不同技术栈的前端项目，我都能迎难而上，毕竟不会就学嘛！</p> <p>哦，写的渐入佳境，我都忘了，自己是一名后端工程师，还搁这儿吹牛逼呢（ 所以本路线难免会有不专业的地方，请大家见谅~</p> <h3 id="_6-总结"><a href="#_6-总结" class="header-anchor">#</a> 6. 总结</h3> <p>总结一下，学前端的路线其实就一句话：基础三件套 =&gt; 巩固基础 =&gt; 学习框架 =&gt; 多做项目 =&gt; 按需学习 =&gt; 拓宽视野。还有一个学任何编程技术都要注意的点，全程多敲代码！多敲代码！多敲代码！</p> <h2 id="尾声-持续学习"><a href="#尾声-持续学习" class="header-anchor">#</a> 尾声 - 持续学习</h2> <h3 id="前端职业发展的几个阶段"><a href="#前端职业发展的几个阶段" class="header-anchor">#</a> 前端职业发展的几个阶段</h3> <ol><li>作为一名合格的前端开发，首先你要能干活、能通过 Vue 之类的前端框架完成公司的需求，比如还原设计稿、开发交互、搭建项目的初始框架（架构）、开发内部的组件库（基建）等等，重点是要学会如何和后端系统进行对接（前后端联调），有时候也需要完成一些简单的服务端开发，比如使用 Node 搭建中间层 / 接入层（BFF）。</li> <li>这就需要你除了学习前端基础三件套之外，还要熟练使用一个开发框架 Vue / React 以及前端工程化的一些工具 / 轮子，比如打包工具用 webpack、性能分析工具、SSR 等），可以帮助你更好地设计项目、开发项目，从而应对需求的变化、使项目更易于维护、可扩展。</li> <li>如果要成为高级前端开发，要了解常用框架 / 工具的运行原理和机制。最好有一个自己擅长 / 专攻的领域，比如低代码、Web IDE、可视化、性能优化、Web Assembly 等等，并且积极参与开源项目和公开分享。</li></ol> <p>随着学习知识的不断丰富和深入，要学会主动到网上关注和汲取知识、了解前端的发展和新技术趋势。比如看书、掘金、InfoQ 等技术网站，或者关注某个领域的大佬、参加一些大会等。</p> <h3 id="优秀前端人的特质"><a href="#优秀前端人的特质" class="header-anchor">#</a> 优秀前端人的特质</h3> <ul><li>深厚的功底</li> <li>良好的编码习惯</li> <li>发现问题的洞察力</li> <li>思维灵活，善于思考</li> <li>追求技术，紧跟前沿</li> <li>有创造力，有行动力</li> <li>追求用户体验</li> <li>时刻保持好奇</li> <li>全栈意识</li> <li>解决问题的能力强</li> <li>懂得合作和高效沟通</li> <li>重视工作，同样重视生活</li> <li>责任心和全局观</li> <li>个人的进步能带动团队的进步</li></ul> <h3 id="学习资源"><a href="#学习资源" class="header-anchor">#</a> 学习资源</h3> <ul><li>编程导航（包含以下所有资源，强烈推荐 👍）：<a href="https://www.code-nav.cn" target="_blank" rel="noopener noreferrer">https://www.code-nav.cn<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>freeCodecamp 在线编程：<a href="https://learn.freecodecamp.one/" target="_blank" rel="noopener noreferrer">https://learn.freecodecamp.one/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>阿里云前端实战学习：<a href="https://edu.aliyun.com/roadmap/frontend" target="_blank" rel="noopener noreferrer">https://edu.aliyun.com/roadmap/frontend<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>W3Cschool 编程入门实战：<a href="https://www.w3cschool.cn/codecamp/" target="_blank" rel="noopener noreferrer">https://www.w3cschool.cn/codecamp/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>腾讯云动手实验室：<a href="https://cloud.tencent.com/developer/labs/gallery" target="_blank" rel="noopener noreferrer">https://cloud.tencent.com/developer/labs/gallery<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>pink老师前端入门教程：<a href="https://www.bilibili.com/video/BV14J4114768" target="_blank" rel="noopener noreferrer">https://www.bilibili.com/video/BV14J4114768<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>MDN 前端文档：<a href="https://developer.mozilla.org/zh-CN" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/zh-CN<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>Node.js 入门：<a href="https://cnodejs.org/getstart" target="_blank" rel="noopener noreferrer">https://cnodejs.org/getstart<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>前端清单：<a href="https://cheatsheets.devtool.tech/" target="_blank" rel="noopener noreferrer">https://cheatsheets.devtool.tech/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>前端小课：<a href="https://lefex.github.io/" target="_blank" rel="noopener noreferrer">https://lefex.github.io/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>被删的前端游乐场：<a href="http://www.godbasin.com/" target="_blank" rel="noopener noreferrer">http://www.godbasin.com/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>《ES6 入门教程》：<a href="https://es6.ruanyifeng.com/" target="_blank" rel="noopener noreferrer">https://es6.ruanyifeng.com/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>谷歌 Web 开发者：<a href="https://developers.google.com/web" target="_blank" rel="noopener noreferrer">https://developers.google.com/web<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>JavaScript 明星项目：<a href="https://risingstars.js.org/2020/zh" target="_blank" rel="noopener noreferrer">https://risingstars.js.org/2020/zh<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>Best of JS：<a href="https://bestofjs.org/" target="_blank" rel="noopener noreferrer">https://bestofjs.org/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>Codewars：<a href="https://www.codewars.com/?language=javascript" target="_blank" rel="noopener noreferrer">https://www.codewars.com/?language=javascript<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>Vue.js examples：<a href="https://vuejsexamples.com/" target="_blank" rel="noopener noreferrer">https://vuejsexamples.com/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="前端资讯"><a href="#前端资讯" class="header-anchor">#</a> 前端资讯</h3> <ul><li>掘金资讯：<a href="https://juejin.cn/news" target="_blank" rel="noopener noreferrer">https://juejin.cn/news<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>InfoQ：<a href="https://www.infoq.cn/topic/Front-end" target="_blank" rel="noopener noreferrer">https://www.infoq.cn/topic/Front-end<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>daily.dev：<a href="https://daily.dev/" target="_blank" rel="noopener noreferrer">https://daily.dev/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="技术博客"><a href="#技术博客" class="header-anchor">#</a> 技术博客</h3> <ul><li>掘金：<a href="https://juejin.cn/frontend" target="_blank" rel="noopener noreferrer">https://juejin.cn/frontend<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>腾讯前端 IMWEB：<a href="http://imweb.io" target="_blank" rel="noopener noreferrer">http://imweb.io<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>腾讯 Web 前端团队 Alloy Team：<a href="http://www.alloyteam.com" target="_blank" rel="noopener noreferrer">http://www.alloyteam.com<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>淘宝前端团队：<a href="http://taobaofed.org" target="_blank" rel="noopener noreferrer">http://taobaofed.org<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>百度 Web 前端研发部：<a href="http://fex.baidu.com" target="_blank" rel="noopener noreferrer">http://fex.baidu.com<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>京东凹凸实验室：<a href="https://aotu.io" target="_blank" rel="noopener noreferrer">https://aotu.io<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>360 奇舞团：<a href="https://75team.com" target="_blank" rel="noopener noreferrer">https://75team.com<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>七牛团队技术博客：<a href="http://blog.qiniu.com" target="_blank" rel="noopener noreferrer">http://blog.qiniu.com<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>有赞技术团队：<a href="https://tech.youzan.com/tag/front-end/" target="_blank" rel="noopener noreferrer">https://tech.youzan.com/tag/front-end/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>百度 EFE Tech：<a href="https://efe.baidu.com/" target="_blank" rel="noopener noreferrer">https://efe.baidu.com/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>css-tricks：<a href="https://css-tricks.com/archives" target="_blank" rel="noopener noreferrer">https://css-tricks.com/archives<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>web.dev：<a href="https://web.dev/blog/" target="_blank" rel="noopener noreferrer">https://web.dev/blog/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="学习要点"><a href="#学习要点" class="header-anchor">#</a> 学习要点</h3> <ul><li>前期学习以培养兴趣为主，不要过于追求深层理解。</li> <li>前端学习不能靠死记硬背，要多敲代码、多做项目实践。</li> <li>不要急于求成，踏实积累才是硬道理。</li></ul></div> <footer class="page-edit" style="margin:0;"><div class="edit-link"><a href="https://github.com/liyupi/codefather/edit/master/学习路线/前端学习路线 by 程序员鱼皮.md" target="_blank" rel="noopener noreferrer">完善页面</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">最近更新:</span> <span class="time">11/11/2023, 8:17:47 PM</span></div></footer> <!----></div> <div class="toc-container-sidebar"><div class="pos-box"><div class="icon-arrow"></div> <div class="scroll-box" style="max-height:86vh"><div style="font-weight:bold;">前端学习路线 by 程序员鱼皮</div> <hr> <div class="toc-box"><ul class="toc-sidebar-links"><li><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#路线特点" class="toc-sidebar-link">路线特点</a><ul class="toc-sidebar-sub-headers"></ul></li><li><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#符号表" class="toc-sidebar-link">符号表</a><ul class="toc-sidebar-sub-headers"></ul></li><li><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#大纲" class="toc-sidebar-link">大纲</a><ul class="toc-sidebar-sub-headers"></ul></li><li><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#前言-学编程需要的特质" class="toc-sidebar-link">前言 - 学编程需要的特质</a><ul class="toc-sidebar-sub-headers"></ul></li><li><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#一、前端入门" class="toc-sidebar-link">一、前端入门</a><ul class="toc-sidebar-sub-headers"><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-开发工具" class="toc-sidebar-link">⭐️ 开发工具</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#浏览器" class="toc-sidebar-link">浏览器</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#编辑器" class="toc-sidebar-link">编辑器</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#文档笔记" class="toc-sidebar-link">文档笔记</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-html" class="toc-sidebar-link">⭐️ HTML</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-css" class="toc-sidebar-link">⭐️ CSS</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-javascript" class="toc-sidebar-link">⭐️ JavaScript</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-es6-特性" class="toc-sidebar-link">✅ ES6+ 特性</a></li></ul></li><li><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#二、巩固基础" class="toc-sidebar-link">二、巩固基础</a><ul class="toc-sidebar-sub-headers"><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#前端基础知识" class="toc-sidebar-link">前端基础知识</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#计算机基础" class="toc-sidebar-link">计算机基础</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-算法和数据结构" class="toc-sidebar-link">✅ 算法和数据结构</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-计算机网络" class="toc-sidebar-link">✅ 计算机网络</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-操作系统" class="toc-sidebar-link">✅ 操作系统</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#软件开发基础" class="toc-sidebar-link">软件开发基础</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-设计模式" class="toc-sidebar-link">✅ 设计模式</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-git-版本控制" class="toc-sidebar-link">⭐️ Git 版本控制</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-linux-服务器" class="toc-sidebar-link">✅ Linux 服务器</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-正则表达式" class="toc-sidebar-link">✅ 正则表达式</a></li></ul></li><li><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#三、前端工程化" class="toc-sidebar-link">三、前端工程化</a><ul class="toc-sidebar-sub-headers"><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-研发流程" class="toc-sidebar-link">⭐️ 研发流程</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-代码托管" class="toc-sidebar-link">⭐️ 代码托管</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-node-js" class="toc-sidebar-link">✅ Node.JS</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-包管理" class="toc-sidebar-link">⭐️ 包管理</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#开发框架" class="toc-sidebar-link">开发框架</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#开发框架-2" class="toc-sidebar-link">开发框架</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-css-框架" class="toc-sidebar-link">⭐️ CSS 框架</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-javascript-框架" class="toc-sidebar-link">⭐️ JavaScript 框架</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-5"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-vue" class="toc-sidebar-link">⭐️ Vue</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-5"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-react" class="toc-sidebar-link">⭐️ React</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-5"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#❌-angular" class="toc-sidebar-link">❌ Angular</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-5"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-svelte" class="toc-sidebar-link">✅ Svelte</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-5"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-umijs" class="toc-sidebar-link">✅ UmiJS</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#封装库" class="toc-sidebar-link">封装库</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-组件库" class="toc-sidebar-link">⭐️ 组件库</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#数据可视化" class="toc-sidebar-link">数据可视化</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#组件-插件" class="toc-sidebar-link">组件（插件）</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#工具库" class="toc-sidebar-link">工具库</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#动效库" class="toc-sidebar-link">动效库</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#字体图标库" class="toc-sidebar-link">字体图标库</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-脚手架" class="toc-sidebar-link">⭐️ 脚手架</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-前端架构设计" class="toc-sidebar-link">⭐️ 前端架构设计</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-服务端渲染" class="toc-sidebar-link">✅ 服务端渲染</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#bff" class="toc-sidebar-link">BFF</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-微前端" class="toc-sidebar-link">✅ 微前端</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#css-in-js" class="toc-sidebar-link">CSS in JS</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-css-模块化" class="toc-sidebar-link">⭐️ CSS 模块化</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-开发调试" class="toc-sidebar-link">✅ 开发调试</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#内网穿透" class="toc-sidebar-link">内网穿透</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-css-预编译" class="toc-sidebar-link">⭐️ CSS 预编译</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#测试" class="toc-sidebar-link">测试</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#测试分类" class="toc-sidebar-link">测试分类</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-mock" class="toc-sidebar-link">✅ Mock</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-测试框架" class="toc-sidebar-link">✅ 测试框架</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-代码质量" class="toc-sidebar-link">✅ 代码质量</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#开发规范" class="toc-sidebar-link">开发规范</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#类型校验" class="toc-sidebar-link">类型校验</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#代码检查" class="toc-sidebar-link">代码检查</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#代码风格" class="toc-sidebar-link">代码风格</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#提交规范" class="toc-sidebar-link">提交规范</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#提交检查" class="toc-sidebar-link">提交检查</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#构建工具" class="toc-sidebar-link">构建工具</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#自动化构建" class="toc-sidebar-link">自动化构建</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#打包工具" class="toc-sidebar-link">打包工具</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#ci-cd" class="toc-sidebar-link">CI / CD</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#部署" class="toc-sidebar-link">部署</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-web-服务器" class="toc-sidebar-link">⭐️ Web 服务器</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-5"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-nginx" class="toc-sidebar-link">⭐️ Nginx</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-5"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-apache" class="toc-sidebar-link">✅ Apache</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#容器" class="toc-sidebar-link">容器</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-5"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-docker" class="toc-sidebar-link">✅ Docker</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-5"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#kubernetes" class="toc-sidebar-link">Kubernetes</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#部署策略" class="toc-sidebar-link">部署策略</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#监控告警" class="toc-sidebar-link">监控告警</a></li></ul></li><li><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#四、前端优化" class="toc-sidebar-link">四、前端优化</a><ul class="toc-sidebar-sub-headers"><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-性能优化" class="toc-sidebar-link">✅ 性能优化</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#性能指标" class="toc-sidebar-link">性能指标</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#优化手段" class="toc-sidebar-link">优化手段</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#用户体验" class="toc-sidebar-link">用户体验</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-兼容性" class="toc-sidebar-link">✅ 兼容性</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#浏览器兼容性" class="toc-sidebar-link">浏览器兼容性</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#屏幕分辨率兼容性" class="toc-sidebar-link">屏幕分辨率兼容性</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#跨平台兼容性" class="toc-sidebar-link">跨平台兼容性</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#seo" class="toc-sidebar-link">SEO</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-安全" class="toc-sidebar-link">✅ 安全</a></li></ul></li><li><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#五、前端生态" class="toc-sidebar-link">五、前端生态</a><ul class="toc-sidebar-sub-headers"><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#⭐️-静态站点构建" class="toc-sidebar-link">⭐️ 静态站点构建</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#开发" class="toc-sidebar-link">开发</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#博客" class="toc-sidebar-link">博客</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#文档" class="toc-sidebar-link">文档</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-大前端" class="toc-sidebar-link">✅ 大前端</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#移动应用" class="toc-sidebar-link">移动应用</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#移动应用打包" class="toc-sidebar-link">移动应用打包</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#桌面应用" class="toc-sidebar-link">桌面应用</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#小程序" class="toc-sidebar-link">小程序</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#跨端开发框架" class="toc-sidebar-link">跨端开发框架</a></li><li class="toc-sidebar-sub-header toc-sidebar-depth-4"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#移动端调试" class="toc-sidebar-link">移动端调试</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-serverless" class="toc-sidebar-link">✅ Serverless</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#✅-云开发" class="toc-sidebar-link">✅ 云开发</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#低代码" class="toc-sidebar-link">低代码</a></li></ul></li><li><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#六、前端求职" class="toc-sidebar-link">六、前端求职</a><ul class="toc-sidebar-sub-headers"><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#简历" class="toc-sidebar-link">简历</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#面试题库" class="toc-sidebar-link">面试题库</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#面经" class="toc-sidebar-link">面经</a></li></ul></li><li><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#七、前端未来" class="toc-sidebar-link">七、前端未来</a><ul class="toc-sidebar-sub-headers"><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#webcomponents" class="toc-sidebar-link">WebComponents</a></li></ul></li><li><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#我的前端学习路线" class="toc-sidebar-link">我的前端学习路线</a><ul class="toc-sidebar-sub-headers"><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#_1-快速入门-培养兴趣" class="toc-sidebar-link">1. 快速入门，培养兴趣</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#_2-多看多写-巩固基础" class="toc-sidebar-link">2. 多看多写，巩固基础</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#_3-框架学习-学以致用" class="toc-sidebar-link">3. 框架学习，学以致用</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#_4-根据需要-自主学习" class="toc-sidebar-link">4. 根据需要，自主学习</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#_5-渐入佳境-拓宽视野" class="toc-sidebar-link">5. 渐入佳境，拓宽视野</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#_6-总结" class="toc-sidebar-link">6. 总结</a></li></ul></li><li><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#尾声-持续学习" class="toc-sidebar-link">尾声 - 持续学习</a><ul class="toc-sidebar-sub-headers"><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#前端职业发展的几个阶段" class="toc-sidebar-link">前端职业发展的几个阶段</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#优秀前端人的特质" class="toc-sidebar-link">优秀前端人的特质</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#学习资源" class="toc-sidebar-link">学习资源</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#前端资讯" class="toc-sidebar-link">前端资讯</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#技术博客" class="toc-sidebar-link">技术博客</a></li><li class="toc-sidebar-sub-header"><a href="/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF-by-%E7%A8%8B%E5%BA%8F%E5%91%98%E9%B1%BC%E7%9A%AE/#学习要点" class="toc-sidebar-link">学习要点</a></li></ul></li></ul></div></div></div></div></div>  <main class="footer"> <div class="copy-right"><span class="name"> 编程导航   |     </span> <a target="_blank" rel="noreferrer">
          
        </a></div></main></main> <aside class="page-sidebar"> <div class="page-side-toolbar"></div>  </aside></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.12ab4756.js" defer></script><script src="/assets/js/2.fd06b53e.js" defer></script><script src="/assets/js/42.e17cd061.js" defer></script>
  </body>
</html>
